<Form>
    <Form.Group widths="equal">
        <Form.Input label="First Name" placeholder="Leia" />
        <Form.Input label="Last Name" placeholder="Organa" />
    </Form.Group>
    <Form.Group grouped>
        <Form.Input label="Address" placeholder="1834 Tantive Ave" />
        <Form.Input />
    </Form.Group>
</Form>

States

Inputs can have a placeholder, a default value, a required state, an error state, and a disabled state. You can use any combination of those states for the experience.

<Form>
    <Headline el="div" className="m-b-4" size="small">Default Inputs</Headline>
    <Form.Input label="Default Input" defaultValue="Leia" />
    <Form.Input label="Empty input" />
    <Form.Input label="Placeholder Input" placeholder="Leia" />
    <Form.Input label="Required Input" defaultValue="Leia" required />
    <Form.Input label="Input" description="Description goes here..." />
</Form>
<Form>
    <Headline el="div" className="m-b-4" size="small">Disabled Inputs</Headline>
    <Form.Input label="Default Input" defaultValue="Leia" disabled />
    <Form.Input label="Empty input" disabled />
    <Form.Input label="Placeholder Input" placeholder="Leia" disabled />
    <Form.Input label="Required Input" defaultValue="Leia" required disabled />
</Form>
<Form>
    <Headline el="div" className="m-b-4" size="small">Error Inputs</Headline>
    <Form.Input label="Default Input" defaultValue="Leia" error />
    <Form.Input label="Empty input" error />
    <Form.Input label="Placeholder Input" placeholder="Leia" error />
    <Form.Input label="Required Input" defaultValue="Leia" required error />
    <Form.Input label="Required Input" required error="This field cannot be left blank." />
</Form>
<Form>
    <Headline el="div" className="m-b-4" size="small">Readonly Inputs</Headline>
    <Form.Input label="Default Input" defaultValue="Leia" readOnly />
    <Form.Input label="Empty input" readOnly />
    <Form.Input label="Placeholder Input" placeholder="Leia" readOnly />
    <Form.Input label="Required Input" defaultValue="Leia" required readOnly />
</Form>

Labels and Placeholders

Labels should be used to describe the information we're asking the user to give us. Placeholders should be used to show an example of the content we're asking the user for. If we use placeholders as labels, once the user starts typing into the field, they lose the description of what we're asking for.

<Form>
    <Form.Input label="First Name" placeholder="Leia" />
    <Form.Input label="Phone Number" placeholder="(800) 555-1234" />
</Form>
<Form>
    <Form.Input label="" placeholder="First Name" />
    <Form.Input label="" placeholder="Phone Number" />
</Form>

Label Help

Labels can have a help icon with a tooltip to provide additional context to a label.

<Form>
    <Form.Input
        label="Input Label"
        labelProps={{
            help: "This is help text"
        }}
    />
</Form>

Required and Optional

A visual indicator can be applied on a Input's label.

<Form>
    <Form.Input
        label="Required Label"
        labelProps={{
            required: true
        }}
    />
    <Form.Input
        label="Optional Label"
        labelProps={{
            optional: true
        }}
    />
</Form>

Input Addons

Input Addons can be added to help describe the content. They can be used to help with formatting or show contextual indicators of the content we're asking for.

<Form>
    <Form.Input placeholder='1,200' label='Cost' shortLabel='$' small />
    <Form.Input placeholder='1,200' label='Cost' shortLabel='$' shortLabelPosition='right' />
    <Form.Input placeholder='XX/XX/XXXX' label='Date' shortLabel={<Icon name='event' />} large />
</Form>
<Form>
    <Form.Input placeholder='1,200' label='Cost' shortLabel='$' small error />
    <Form.Input placeholder='1,200' label='Cost' shortLabel='$' shortLabelPosition='right' error />
    <Form.Input placeholder='XX/XX/XXXX' label='Date' shortLabel={<Icon name='event' />} large error />
</Form>

Sizes

Inputs can appear in three different sizes. The medium size is the default size, while small and large will allow the inputs to resize to take up more and less space in a layout. These match up with our Button sizes.

<Form>
    <Form.Input label="Small Input" small />
    <Form.Input label="Default Input" />
    <Form.Input label="Large Input" large />
</Form>

Focus

An input can be focused via a ref

const ref = React.createRef();
const onClick = () => { ref.current.focus(); };
render (
    <Form>
        <Stack spacing="1">
            <Button onClick={onClick}>Focus</Button>
            <Input ref={ref} style={{flexGrow: 1}} />
        </Stack>
    </Form>
)

Best Practices

Inputs should:

  • Be clearly labeled so it’s obvious to the user what they should enter into the field
  • Only ask for information that’s really needed
  • Validate input as soon as merchant has finished interacting with a field (but not before)

Related Components

  • To build a full form, use the Form component.
  • For multiline text input, use a TextArea.

Importing

import { Input } from '@servicetitan/design-system';