Form
Use Forms to allow people to enter data for use by the application, or to configure options. Forms are used to get information and guide people with minimal fuss. Designing forms well requires making decisions about structure, sequence, interface elements, field labels, help, and feedback.
<State initial={false}>{([organization, setOrganization]) => (<Form><Headline el="div" className="m-b-4">Add Contact</Headline><Form.Group widths="equal" className="m-b-3"><Form.Input label="First Name" placeholder="Leia" /><Form.Input label="Last Name" placeholder="Organa" /></Form.Group><Form.AnvilSelectlabel="Home Planet"trigger={{placeholder: 'Choose Planet',}}className="m-b-3"options={[{ key: 1, value: 1, text: 'Alderaan' },{ key: 2, value: 2, text: 'Bespin' },{ key: 3, value: 3, text: 'Coruscant' },{ key: 4, value: 4, text: 'Dagobah' },{ key: 5, value: 5, text: 'Hoth' },{ key: 6, value: 6, text: 'Kashyyyk' },{ key: 7, value: 7, text: 'Naboo' },{ key: 8, value: 8, text: 'Tatooine' },{ key: 9, value: 9, text: 'Yavin' },]}/><Form.Field className="m-b-3"><Grid columns="equal"><Grid.Column><Form.Group grouped><label>Organization</label><Form.Radiolabel="Rebel Alliance"value="1"checked={organization === 1}onChange={() => setOrganization(1)}/><Form.Radiolabel="Galactic Empire"value="2"checked={organization === 2}onChange={() => setOrganization(2)}/><Form.Radiolabel="Trade Federation"value="3"checked={organization === 3}onChange={() => setOrganization(3)}/></Form.Group></Grid.Column><Grid.Column><Form.Group grouped><label>Attributes</label><Form.Checkbox label="Force User" /><Form.Checkbox label="Pilot" /><Form.Checkbox label="Bounty Hunter" /></Form.Group></Grid.Column></Grid></Form.Field><Form.TextArealabel="Quotes"showCountermaxLength={300}placeholder="Aren't you a little short for a stormtrooper?"className="m-b-3"/><Form.Group className="m-t-5"><Form.Button primary>Save Contact</Form.Button><Form.Button>Cancel</Form.Button></Form.Group></Form>)}</State>
Form.Groups
with widths="equal"
and long descriptions or error text, add this CSS to any relevant form input elements to ensure they always maintain equal widths:flex-basis: min-content
Components within a Form have a few labeling options.
Labels can have a help icon with a tooltip to provide additional context to a label.
A visual indicator can be applied on a form's label. Refer to the pattern for suggested use.
An action can be applied to certain forms. This action is a closely related secondary option to the field.
<State initial={false}>{([open, setOpen]) => (<Form><Form.Inputlabel="Field Label"labelProps={{action: (<Stack justifyContent="center"><Popoverheader={<BodyText size="small">Popover Header</BodyText>}headerAlign="space-between"trigger={<LinkprimaryonClick={() => setOpen(!open)}>Popover Action</Link>}footer={<BodyText size="small">Popover Footer</BodyText>}open={open}direction="tl"width="xs"><div><BodyText size="small">Popover content.</BodyText><BodyText size="small">Second line of text.</BodyText></div></Popover></Stack>),}}/></Form>)}</State>
<State initial={false}>{([open, setOpen]) => (<div><ModalclosableonClose={() => setOpen(false)}open={open}title="Accept Estimate"footer={<Button primary onClick={() => setOpen(false)}>Submit</Button>}>This is a modal that was triggered by an action.</Modal><Form><Form.Inputlabel="Field Label"labelProps={{action: (<Link primary onClick={() => setOpen(true)}>Modal Action</Link>),}}/></Form></div>)}</State>
<State initial={false}>{([open, setOpen]) => (<div><Drawerheader="Drawer Header"open={open}onClose={() => setOpen(false)}>Content related to the field.</Drawer><Form><Form.Inputlabel="Field Label"labelProps={{action: (<Link primary onClick={() => setOpen(!open)}>Drawer Action</Link>),}}/></Form></div>)}</State>
Counter can be displayed for Input and TextArea when there is a maxLength
.
Forms can provide a visual for errors.
<Formstyle={{display: 'grid',gridTemplateColumns: '1fr 1fr',gridRowGap: '16px',gridColumnGap: '16px',justifyItems: 'stretch',alignItems: 'start',}}><Form.Inputlabel="Input Label"value="Input value"error="This is error text"/><Form.AnvilSelectlabel="Select Label"placeholder="Select value"error="This is error text"options={[]}/><Form.Radiolabel="Field Label"value="Input value"error="This is error text"/><Form.Checkboxlabel="Field Label"value="Input value"error="This is error text"/></Form>
<Form><Form.Inputlabel="Input Label"value="Input value"error={<Stack className="m-t-2" alignItems="flex-start"><Icon name="warning" size={18} className="c-red-500 m-r-1" /><Stack direction="column"><BodyText className="c-red-500 m-b-1 lh-1" size="small">{' '}This is a custom made error message</BodyText><BodyText className="c-red-500 lh-1" size="small">This is a second line of errors</BodyText></Stack></Stack>}/></Form>
A form can also have description content below the control. This content can be useful to provide context to the user.
<Formstyle={{display: 'grid',gridTemplateColumns: '1fr 1fr',gridRowGap: '24px',gridColumnGap: '24px',justifyItems: 'stretch',alignItems: 'start',}}><Form.Inputlabel="Name"value="John Doe"description="Your name may appear around the site."/><Form.Inputlabel="Password"type="Password"value="123456"description={<React.Fragment><BodyText subdued size="small" className="m-t-2 m-b-half">Use 8 or more characters</BodyText><BodyText subdued size="small" className="m-b-half">Use at least one uppercase and one lowercase letter (Aa)</BodyText><BodyText subdued size="small">Use at least one digit (0-9)</BodyText></React.Fragment>}/><Form.ToggleSwitchlabel="Show Job History"placeholder="Select value"description="Enabling this will show job information to everyone who has access to project history."/><Form.Checkboxlabel="XLS"size="large"description="Only supports version X, Y, and Z."/><Form.Inputlabel="Description and Error"value="Input Value"description="Description text in relation to error text"error="This is an error message"/></Form>
import { Form } from '@servicetitan/design-system';