Form

Collects information in sections of fields, then submits it with one button.

Usage

Import the component and render it.

import { Form } from 'src/components/Form/Form';
import { FormSection } from 'src/components/Form/FormSection';
import { Input } from 'src/components/Input/Input';
import { FormRow } from 'src/components/Form/FormRow';
import { Select } from 'src/components/Select/Select';
import { Separator } from 'src/components/Separator/Separator';
import { Checkbox } from 'src/components/Checkbox/Checkbox';
import { TextArea } from 'src/components/TextArea/TextArea';
import { CreditCardIcon, CardholderIcon } from '@phosphor-icons/react';

<Form size="sm" submitLabel="Pay Now">
  <FormSection title="Checkout" description="Complete your purchase securely.">
    <Input
      label="Card Number"
      name="cardNumber"
      placeholder="1234 5678 9012 3456"
      helperText="Enter your 16-digit card number"
      iconStart={<CreditCardIcon />}
    />
    <Input
      label="Cardholder Name"
      name="cardholderName"
      placeholder="Full name on card"
      iconStart={<CardholderIcon />}
    />
    <FormRow>
      <Select
        label="Month"
        name="month"
        placeholder="MM"
        options={[{"value":"01","label":"01"},{"value":"02","label":"02"},{"value":"03","label":"03"},{"value":"04","label":"04"},{"value":"05","label":"05"},{"value":"06","label":"06"},{"value":"07","label":"07"},{"value":"08","label":"08"},{"value":"09","label":"09"},{"value":"10","label":"10"},{"value":"11","label":"11"},{"value":"12","label":"12"}]}
      />
      <Select
        label="Year"
        name="year"
        placeholder="YYYY"
        options={[{"value":"2026","label":"2026"},{"value":"2027","label":"2027"},{"value":"2028","label":"2028"},{"value":"2029","label":"2029"},{"value":"2030","label":"2030"},{"value":"2031","label":"2031"},{"value":"2032","label":"2032"},{"value":"2033","label":"2033"},{"value":"2034","label":"2034"},{"value":"2035","label":"2035"}]}
      />
      <Input label="CVV" name="cvv" placeholder="123" />
    </FormRow>
  </FormSection>
  <Separator />
  <FormSection
    title="Billing Address"
    description="The billing address associated with your payment method."
  >
    <Checkbox
      label="Same as shipping address"
      name="sameAsShipping"
      defaultChecked
    />
    <TextArea
      label="Comments"
      name="comments"
      placeholder="Add any additional comments"
    />
  </FormSection>
</Form>

Accessibility

Role: form; each Form Section is a group (fieldset) named by its title.

Key	Action
`Tab`	Moves through the fields, then the submit Button
`Enter (in a text field)`	Submits the form

Every field keeps its own label and helper text (aria-describedby).
The submit Button is a real submit button, so Enter in a field submits the form as browsers expect.

Size

Set the size prop: Small is "sm", Medium is "md".

Small

Medium

<Form size="sm" />
<Form size="md" />

Composition

Use the following composition to build a Form:

Form
├── FormSection
│   ├── Input
│   └── Select
├── FormRow
├── Input
├── Select
├── Checkbox
├── TextArea
├── Separator
└── Button

FormSection

A group of related fields in a Form: a title, an optional description, then its fields. Only used inside Form.

Checkout

Complete your purchase securely.

Card Number

Enter your 16-digit card number

Cardholder Name

Month

Year

CVV

FormSection

<FormSection title="Checkout" />

FormRow

Fields side by side in a Form Section; each one takes an equal share of the width. Only used inside Form.

Month

Year

CVV

FormRow

<FormRow />

Actions

Pass callbacks to respond to the component.

import { Form } from 'src/components/Form/Form';
import { FormSection } from 'src/components/Form/FormSection';
import { Input } from 'src/components/Input/Input';
import { FormRow } from 'src/components/Form/FormRow';
import { Select } from 'src/components/Select/Select';
import { Separator } from 'src/components/Separator/Separator';
import { Checkbox } from 'src/components/Checkbox/Checkbox';
import { TextArea } from 'src/components/TextArea/TextArea';
import { CreditCardIcon, CardholderIcon } from '@phosphor-icons/react';

<Form
  size="sm"
  submitLabel="Pay Now"
  onSubmit={(data, event) => console.log(data, event)}
>
  <FormSection title="Checkout" description="Complete your purchase securely.">
    <Input
      label="Card Number"
      name="cardNumber"
      placeholder="1234 5678 9012 3456"
      helperText="Enter your 16-digit card number"
      iconStart={<CreditCardIcon />}
    />
    <Input
      label="Cardholder Name"
      name="cardholderName"
      placeholder="Full name on card"
      iconStart={<CardholderIcon />}
    />
    <FormRow>
      <Select
        label="Month"
        name="month"
        placeholder="MM"
        options={[{"value":"01","label":"01"},{"value":"02","label":"02"},{"value":"03","label":"03"},{"value":"04","label":"04"},{"value":"05","label":"05"},{"value":"06","label":"06"},{"value":"07","label":"07"},{"value":"08","label":"08"},{"value":"09","label":"09"},{"value":"10","label":"10"},{"value":"11","label":"11"},{"value":"12","label":"12"}]}
      />
      <Select
        label="Year"
        name="year"
        placeholder="YYYY"
        options={[{"value":"2026","label":"2026"},{"value":"2027","label":"2027"},{"value":"2028","label":"2028"},{"value":"2029","label":"2029"},{"value":"2030","label":"2030"},{"value":"2031","label":"2031"},{"value":"2032","label":"2032"},{"value":"2033","label":"2033"},{"value":"2034","label":"2034"},{"value":"2035","label":"2035"}]}
      />
      <Input label="CVV" name="cvv" placeholder="123" />
    </FormRow>
  </FormSection>
  <Separator />
  <FormSection
    title="Billing Address"
    description="The billing address associated with your payment method."
  >
    <Checkbox
      label="Same as shipping address"
      name="sameAsShipping"
      defaultChecked
    />
    <TextArea
      label="Comments"
      name="comments"
      placeholder="Add any additional comments"
    />
  </FormSection>
</Form>

Callback	When
`onSubmit`	Called with the fields’ values when the form is submitted (the page does not reload unless `action` is set).