Form

Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.

install	`yarn add @react-spectrum/form`
version	3.0.0-rc.2
usage	`import {Form} from '@react-spectrum/form'`

View repository

GitHub

View package

NPM

Example#

<Form maxWidth="size-3600">
  <TextField label="Email" placeholder="abc@adobe.com" />
  <TextField label="Password" placeholder="1234" />
  <Checkbox>Remember me</Checkbox>
</Form>

<Form maxWidth="size-3600">
  <TextField label="Email" placeholder="abc@adobe.com" />
  <TextField label="Password" placeholder="1234" />
  <Checkbox>Remember me</Checkbox>
</Form>

<Form maxWidth="size-3600">
  <TextField
    label="Email"
    placeholder="abc@adobe.com"
  />
  <TextField
    label="Password"
    placeholder="1234"
  />
  <Checkbox>
    Remember me
  </Checkbox>
</Form>

Content#

Form accepts one or more children to render as its form elements. Label alignment, positioning, and other properties are set on the Form itself and propagated to its children to generate a cohesive design. To override these top level Form props on individual children, set them directly on the child instead.

<Form maxWidth="size-3600" isRequired necessityIndicator="label">
  <TextField label="Name" placeholder="Jane Smith" />
  <TextField label="Email" placeholder="abc@adobe.com" />
  <TextField label="Address" placeholder="123 Any Street" isRequired={false} />
</Form>

<Form
  maxWidth="size-3600"
  isRequired
  necessityIndicator="label">
  <TextField label="Name" placeholder="Jane Smith" />
  <TextField label="Email" placeholder="abc@adobe.com" />
  <TextField
    label="Address"
    placeholder="123 Any Street"
    isRequired={false}
  />
</Form>

<Form
  maxWidth="size-3600"
  isRequired
  necessityIndicator="label">
  <TextField
    label="Name"
    placeholder="Jane Smith"
  />
  <TextField
    label="Email"
    placeholder="abc@adobe.com"
  />
  <TextField
    label="Address"
    placeholder="123 Any Street"
    isRequired={false}
  />
</Form>

Labeling#

Accessibility#

A label should be provided to the Form by adding either the aria-label or aria-labelledby prop, so that the element will be identified to assistive technology as a form landmark region to which assistive technology can navigate to.

<h3 id="label-3">Personal Information</h3>
<Form maxWidth="size-3600" aria-labelledby="label-3">
  <TextField label="First Name" placeholder="John" />
  <TextField label="Last Name" placeholder="Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
    <Radio value="dragons">Dragons</Radio>
  </RadioGroup>
</Form>

<h3 id="label-3">Personal Information</h3>
<Form maxWidth="size-3600" aria-labelledby="label-3">
  <TextField label="First Name" placeholder="John" />
  <TextField label="Last Name" placeholder="Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
    <Radio value="dragons">Dragons</Radio>
  </RadioGroup>
</Form>

<h3 id="label-3">
  Personal Information
</h3>
<Form
  maxWidth="size-3600"
  aria-labelledby="label-3">
  <TextField
    label="First Name"
    placeholder="John"
  />
  <TextField
    label="Last Name"
    placeholder="Smith"
  />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">
      Dogs
    </Radio>
    <Radio value="cats">
      Cats
    </Radio>
    <Radio value="dragons">
      Dragons
    </Radio>
  </RadioGroup>
</Form>

Props#

Name	Type	Default	Description
`children`	`ReactElement<SpectrumLabelableProps> \| ReactElement<SpectrumLabelableProps>[]`	—	The contents of the Form.
`isQuiet`	`boolean`	—	Whether the Form elements are displayed with their quiet style.
`isEmphasized`	`boolean`	—	Whether the Form elements are rendered with their emphasized style.
`isDisabled`	`boolean`	—	Whether the Form elements are disabled.
`isRequired`	`boolean`	—	Whether user input is required on each of the Form elements before Form submission.
`isReadOnly`	`boolean`	—	Whether the Form elements can be selected but not changed by the user.
`validationState`	`ValidationState`	`"valid"`	Whether the Form elements should display their "valid" or "invalid" visual styling.
`UNSAFE_className`	`string`	—
`UNSAFE_style`	`CSSProperties`	—
`labelPosition`	`LabelPosition`	`"top"`	The label's overall position relative to the element it is labeling.
`labelAlign`	`Alignment`	`"start"`	The label's horizontal alignment relative to the element it is labeling.
`necessityIndicator`	`NecessityIndicator`	`"icon"`	Whether the required state should be shown as an icon or text.
`label`	`ReactNode`	—	The content to display as the label.

Layout

Name	Type	Default	Description
`flex`	`string \| number \| boolean`	—
`flexGrow`	`number`	—
`flexShrink`	`number`	—
`flexBasis`	`number \| string`	—
`alignSelf`	`'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'stretch'`	—
`justifySelf`	`'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'left' \| 'right' \| 'stretch'`	—
`flexOrder`	`number`	—
`gridArea`	`string`	—
`gridColumn`	`string`	—
`gridRow`	`string`	—
`gridColumnStart`	`string`	—
`gridColumnEnd`	`string`	—
`gridRowStart`	`string`	—
`gridRowEnd`	`string`	—

Spacing

Name	Type	Default	Description
`margin`	`DimensionValue`	—
`marginTop`	`DimensionValue`	—
`marginLeft`	`DimensionValue`	—
`marginRight`	`DimensionValue`	—
`marginBottom`	`DimensionValue`	—
`marginStart`	`DimensionValue`	—
`marginEnd`	`DimensionValue`	—
`marginX`	`DimensionValue`	—
`marginY`	`DimensionValue`	—

Sizing

Name	Type	Default	Description
`width`	`DimensionValue`	—
`minWidth`	`DimensionValue`	—
`maxWidth`	`DimensionValue`	—
`height`	`DimensionValue`	—
`minHeight`	`DimensionValue`	—
`maxHeight`	`DimensionValue`	—

Positioning

Name	Type	Default	Description
`position`	`'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky'`	—
`top`	`DimensionValue`	—
`bottom`	`DimensionValue`	—
`left`	`DimensionValue`	—
`right`	`DimensionValue`	—
`start`	`DimensionValue`	—
`end`	`DimensionValue`	—
`zIndex`	`number`	—
`isHidden`	`boolean`	—

Accessibility

Name	Type	Default	Description
`id`	`string`	—
`aria-label`	`string`	—	Defines a string value that labels the current element.
`aria-labelledby`	`string`	—	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	—	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	—	Identifies the element (or elements) that provide a detailed, extended description for the object.

Visual options#

Label position and alignment#

Top label position, start label alignment

<Form
  labelPosition="top"
  labelAlign="start"
  aria-label="Top position, start alignment example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  labelPosition="top"
  labelAlign="start"
  aria-label="Top position, start alignment example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  labelPosition="top"
  labelAlign="start"
  aria-label="Top position, start alignment example"
  maxWidth="size-3600">
  <TextField
    label="Name"
    placeholder="John Smith"
  />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">
      Dogs
    </Radio>
    <Radio value="cats">
      Cats
    </Radio>
  </RadioGroup>
</Form>

Side label position, start label alignment

<Form
  labelPosition="side"
  labelAlign="start"
  aria-label="Side position, start alignment example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  labelPosition="side"
  labelAlign="start"
  aria-label="Side position, start alignment example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  labelPosition="side"
  labelAlign="start"
  aria-label="Side position, start alignment example"
  maxWidth="size-3600">
  <TextField
    label="Name"
    placeholder="John Smith"
  />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">
      Dogs
    </Radio>
    <Radio value="cats">
      Cats
    </Radio>
  </RadioGroup>
</Form>

Side label position, end label alignment

<Form
  labelPosition="side"
  labelAlign="end"
  aria-label="Side position, end alignment example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  labelPosition="side"
  labelAlign="end"
  aria-label="Side position, end alignment example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  labelPosition="side"
  labelAlign="end"
  aria-label="Side position, end alignment example"
  maxWidth="size-3600">
  <TextField
    label="Name"
    placeholder="John Smith"
  />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">
      Dogs
    </Radio>
    <Radio value="cats">
      Cats
    </Radio>
  </RadioGroup>
</Form>

Quiet#

<Form isQuiet aria-label="Quiet example" maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <TextField label="Address" placeholder="123 Any Street" />
</Form>

<Form
  isQuiet
  aria-label="Quiet example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <TextField
    label="Address"
    placeholder="123 Any Street"
  />
</Form>

<Form
  isQuiet
  aria-label="Quiet example"
  maxWidth="size-3600">
  <TextField
    label="Name"
    placeholder="John Smith"
  />
  <TextField
    label="Address"
    placeholder="123 Any Street"
  />
</Form>

Emphasized#

<Form isEmphasized aria-label="Emphasized example" maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet" defaultValue="dogs">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  isEmphasized
  aria-label="Emphasized example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet" defaultValue="dogs">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  isEmphasized
  aria-label="Emphasized example"
  maxWidth="size-3600">
  <TextField
    label="Name"
    placeholder="John Smith"
  />
  <RadioGroup
    label="Favorite pet"
    defaultValue="dogs">
    <Radio value="dogs">
      Dogs
    </Radio>
    <Radio value="cats">
      Cats
    </Radio>
  </RadioGroup>
</Form>

Disabled#

<Form isDisabled aria-label="Disabled example" maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  isDisabled
  aria-label="Disabled example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  isDisabled
  aria-label="Disabled example"
  maxWidth="size-3600">
  <TextField
    label="Name"
    placeholder="John Smith"
  />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">
      Dogs
    </Radio>
    <Radio value="cats">
      Cats
    </Radio>
  </RadioGroup>
</Form>

Required and necessity indicator#

Optional label

<Form
  necessityIndicator="label"
  aria-label="Optional with label example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  necessityIndicator="label"
  aria-label="Optional with label example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  necessityIndicator="label"
  aria-label="Optional with label example"
  maxWidth="size-3600">
  <TextField
    label="Name"
    placeholder="John Smith"
  />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">
      Dogs
    </Radio>
    <Radio value="cats">
      Cats
    </Radio>
  </RadioGroup>
</Form>

Required label

<Form
  isRequired
  necessityIndicator="label"
  aria-label="Required with label example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  isRequired
  necessityIndicator="label"
  aria-label="Required with label example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  isRequired
  necessityIndicator="label"
  aria-label="Required with label example"
  maxWidth="size-3600">
  <TextField
    label="Name"
    placeholder="John Smith"
  />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">
      Dogs
    </Radio>
    <Radio value="cats">
      Cats
    </Radio>
  </RadioGroup>
</Form>

Required with asterisk

<Form
  isRequired
  necessityIndicator="icon"
  aria-label="Required with asterisk example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  isRequired
  necessityIndicator="icon"
  aria-label="Required with asterisk example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  isRequired
  necessityIndicator="icon"
  aria-label="Required with asterisk example"
  maxWidth="size-3600">
  <TextField
    label="Name"
    placeholder="John Smith"
  />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">
      Dogs
    </Radio>
    <Radio value="cats">
      Cats
    </Radio>
  </RadioGroup>
</Form>

Read only#

<Form isReadOnly aria-label="isReadOnly example" maxWidth="size-3600">
  <TextField label="Name" value="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  isReadOnly
  aria-label="isReadOnly example"
  maxWidth="size-3600">
  <TextField label="Name" value="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  isReadOnly
  aria-label="isReadOnly example"
  maxWidth="size-3600">
  <TextField
    label="Name"
    value="John Smith"
  />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">
      Dogs
    </Radio>
    <Radio value="cats">
      Cats
    </Radio>
  </RadioGroup>
</Form>

Validation state#

<Form
  validationState="invalid"
  aria-label="Invalid validationState example"
  maxWidth="size-3600"
  marginBottom="size-300">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  validationState="invalid"
  aria-label="Invalid validationState example"
  maxWidth="size-3600"
  marginBottom="size-300">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  validationState="invalid"
  aria-label="Invalid validationState example"
  maxWidth="size-3600"
  marginBottom="size-300">
  <TextField
    label="Name"
    placeholder="John Smith"
  />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">
      Dogs
    </Radio>
    <Radio value="cats">
      Cats
    </Radio>
  </RadioGroup>
</Form>

<Form
  validationState="valid"
  aria-label="Valid validationState example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  validationState="valid"
  aria-label="Valid validationState example"
  maxWidth="size-3600">
  <TextField label="Name" placeholder="John Smith" />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">Dogs</Radio>
    <Radio value="cats">Cats</Radio>
  </RadioGroup>
</Form>

<Form
  validationState="valid"
  aria-label="Valid validationState example"
  maxWidth="size-3600">
  <TextField
    label="Name"
    placeholder="John Smith"
  />
  <RadioGroup label="Favorite pet">
    <Radio value="dogs">
      Dogs
    </Radio>
    <Radio value="cats">
      Cats
    </Radio>
  </RadioGroup>
</Form>

Name	Type	Description
`labelPosition`	`LabelPosition`	The label's overall position relative to the element it is labeling.
`labelAlign`	`Alignment`	The label's horizontal alignment relative to the element it is labeling.
`necessityIndicator`	`NecessityIndicator`	Whether the required state should be shown as an icon or text.
`label`	`ReactNode`	The content to display as the label.
`isRequired`	`boolean`	Whether the label is labeling a required field or group.

'top' | 'side'

'start' | 'end'

'icon' | 'label'

'valid' | 'invalid'

'size-0'
  | 'size-10'
  | 'size-25'
  | 'size-40'
  | 'size-50'
  | 'size-65'
  | 'size-75'
  | 'size-85'
  | 'size-100'
  | 'size-115'
  | 'size-125'
  | 'size-130'
  | 'size-150'
  | 'size-160'
  | 'size-175'
  | 'size-200'
  | 'size-225'
  | 'size-250'
  | 'size-300'
  | 'size-350'
  | 'size-400'
  | 'size-450'
  | 'size-500'
  | 'size-550'
  | 'size-600'
  | 'size-675'
  | 'size-700'
  | 'size-800'
  | 'size-900'
  | 'size-1000'
  | 'size-1200'
  | 'size-1250'
  | 'size-1600'
  | 'size-1700'
  | 'size-2000'
  | 'size-2400'
  | 'size-3000'
  | 'size-3400'
  | 'size-3600'
  | 'size-4600'
  | 'size-5000'
  | 'size-6000'
  | 'static-size-0'
  | 'static-size-10'
  | 'static-size-25'
  | 'static-size-50'
  | 'static-size-40'
  | 'static-size-65'
  | 'static-size-100'
  | 'static-size-115'
  | 'static-size-125'
  | 'static-size-150'
  | 'static-size-175'
  | 'static-size-200'
  | 'static-size-225'
  | 'static-size-250'
  | 'static-size-300'
  | 'static-size-400'
  | 'static-size-450'
  | 'static-size-500'
  | 'static-size-550'
  | 'static-size-600'
  | 'static-size-700'
  | 'static-size-800'
  | 'static-size-900'
  | 'static-size-1000'
  | 'static-size-1200'
  | 'static-size-1700'
  | 'static-size-2400'
  | 'static-size-2600'
  | 'static-size-3400'
  | 'static-size-3600'
  | 'static-size-4600'
  | 'static-size-5000'
  | 'static-size-6000'
  | 'single-line-height'
  | 'single-line-width'
  | string
  | number