Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Form

Version 11.1.1GithubStorybook

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

Installation

Installation page anchor
yarn add @twilio-paste/form - or - yarn add @twilio-paste/core

Usage

Usage page anchor
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>
);

Props

Props page anchor

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 }

FormActions

FormActions page anchor

element

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

Type
string
Default
'FORM_ACTIONS'

FormControl

FormControl page anchor

element

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

Type
string
Default
'FORM_CONTROL'

FormControlTwoColumn

FormControlTwoColumn page anchor

element

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

Type
string
Default
'FORM_CONTROL_TWO_COLUMN'

FormSection

FormSection page anchor

element

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

Type
string
Default
'FORM_SECTION'

FormSectionDescription

FormSectionDescription page anchor

element

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

Type
string
Default
'FORM_SECTION_DESCRIPTION'

FormSectionHeading

FormSectionHeading page anchor

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'