FormSection

Form sections for grouping related fields with labels and descriptions.

Installation

bash

npx @smicolon/cli add form-section

Run init once per project before adding components. See Installation.

Preview

Personal Information

Update your personal details.

First Name*

Last Name*

With Error

Email*

This email is already taken

Form Actions

Props

The table covers the props of FormSection, FormField and FormActions.

Prop	Type	Default	Description
`title`	`string`	—	Section title.
`description`	`string`	—	Text below the title or label.
`divider`	`boolean`	`true`	Shows a divider at the bottom.
`label`	`string`	—	Field label.
`error`	`string`	—	Error message below the field.
`required`	`boolean`	`false`	Marks the field as required.
`htmlFor`	`string`	—	Connects the label to its input.
`align`	`"left" \| "right" \| "center" \| "between"`	`"right"`	Alignment of the actions.
`sticky`	`boolean`	`false`	Sticks the actions to the bottom.
`className`	`string`	—	Extra classes for the part.

Usage

tsx

import { FormSection, FormField, FormActions } from "@/components/blocks/form-section"

<FormSection title="Account" description="Update your account settings.">
  <FormField label="Email" required>
    <Input type="email" />
  </FormField>
</FormSection>

<FormActions>
  <Button variant="outline">Cancel</Button>
  <Button>Save</Button>
</FormActions>