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).

Import

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

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

Usage

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
• Narrow

Source

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