# FormSection

> Titled block of a form: the title and description beside the fields from 640px of container width, stacked above them in a narrower container (the wrapper is the size container).

Source: https://ui.jcsoftdev.com/docs/components/form-section

Titled block of a form: the title and description beside the fields from 640px of container
width, stacked above them in a narrower container (the wrapper is the size container).

## Import

```ts
import { FormSection } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/form-section`.

## Usage

```tsx
export const Sections: Story = {
  render: (args) => (
    <Form>
      <FormSection {...args}>
        <FormGrid>
          <Field label="Correo" required>
            <Input type="email" />
          </Field>
          <Field label="Teléfono" optional>
            <Input type="tel" />
          </Field>
        </FormGrid>
      </FormSection>
      <FormSection title="Observaciones" description="Visible solo para el personal.">
        <Field label="Notas">
          <Textarea />
        </Field>
      </FormSection>
    </Form>
  ),
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `ReactNode` |  |  |
| `description` | `ReactNode` |  |  |
| `children` * | `ReactNode` |  | The fields; usually a `FormGrid`. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Sections](/storybook/?path=/story/forms-formsection--sections)
- [Narrow](/storybook/?path=/story/forms-formsection--narrow)

## Source

`packages/ui/src/forms/form-section/form-section.tsx`