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>
);
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'FORM'
maxWidth
The maximum width of the Form.
- Type
any
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'FORM_ACTIONS'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'FORM_CONTROL'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'FORM_CONTROL_TWO_COLUMN'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'FORM_SECTION'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'FORM_SECTION_DESCRIPTION'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'FORM_SECTION_HEADING'
variant
The style variant you want to render the heading with. This maps directly to the heading variant.
- Type
any- Default
'heading40'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.