Skip to contentSkip to navigationSkip to topbar
Figma
Star

Form

A form groups related form elements that allow users to input information or configure options.

Version 11.1.1
Github

Installation

Installation page anchor
yarn add @twilio-paste/form - or - yarn add @twilio-paste/core
import {
  Form,
  FormSection,
  FormSectionHeading,
  FormControl
} from '@twilio-paste/core/form;
import {Input} from '@twilio-paste/core/input;
import {Label} from '@twilio-paste/core/label;

const SampleForm = () => (
 <Form maxWidth="size30">
   <FormSection>
     <FormSectionHeading variant="heading30">
       Personal information
     </FormSectionHeading>
     <FormControl>
       <Label htmlFor="first-name">First name</Label>
       <Input id="first-name" />
     </FormControl>
     <FormControl>
       <Label htmlFor="last-name">Last name</Label>
       <Input id="last-name" />
     </FormControl>
   </FormSection>
 </CheckboxGroup>
);

Form

Form page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'FORM'

maxWidth

The maximum width of the Form.

Type
| string | number | (string & {}) | (MaxWidthOptions | null)[] | { [x: string]: MaxWidthOptions; [x: number]: MaxWidthOptions }

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'FORM_ACTIONS'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'FORM_CONTROL'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'FORM_CONTROL_TWO_COLUMN'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'FORM_SECTION'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'FORM_SECTION_DESCRIPTION'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'FORM_SECTION_HEADING'

variant

The style variant you want to render the heading with. This maps directly to the heading variant.

Type
HeadingVariants
Default
'heading40'