Input

Features

• Supports adding a postfix and/or prefix
• Can be rendered in a skeleton (loading) state
• Compatible with our Form control component
• Adheres to our form accessibility guidelines.

When to use

Use a text input to allow users to input short free-form text. For longer text, consider using a Textarea component instead. See our Forms guidelines for detailed information on forms structure, validation, and more.

Examples

Label

The label of a form element should be clear and concise, ideally under three words. It should describe the value of the element and not what the user needs to do in order to fill it out properly.

<FormControl maxWidth="240px">
    <FormControl.Label>Email</FormControl.Label>
    <Input name="email" value="jeppe@pleo.io" />
</FormControl>

Hiding the label

Never omit the label completely. In rare cases, you may want to hide the label visually. An example of this could be a search field placed near the top of a page, featuring a magnifying glass icon and/or a button labelled “Search”.

<FormControl maxWidth="240px">
    <VisuallyHidden>
        <FormControl.Label>Search</FormControl.Label>
    </VisuallyHidden>
    <Input placeholder="Search..." name="search" type="search" prefix={<Search size={16} />} />
</FormControl>

Placeholder

In general, avoid using placeholder text. Putting instructions or important information in placeholder text isn't accessible. As soon as someone starts typing, that text vanishes, and people using auto-fill tools can't see it at all.

<FormControl maxWidth="240px">
    <FormControl.Label>Birthdate</FormControl.Label>
    <Input name="birthdate" placeholder={'MM/DD/YYYY'} />
</FormControl>

Required or optional

Mark the minority of form elements in a form as required or optional. This helps users scan the form and understand what is required of them. Type out the word optional or required in the label. E.g. "Per purchase limit (optional)". Don't use asterisks or other symbols.

<FormControl maxWidth="240px">
    <FormControl.Label>Email (required)</FormControl.Label>
    <Input name="email" isRequired />
</FormControl>

Hint text

Use hint text to give users clear guidance for data entry. Keep it brief and avoid repeating the label or other form details. If it feels redundant, try removing it. We keep help text above the input field to have the reading order match the visual order, which is needed for screen readers.

<FormControl maxWidth="240px">
    <FormControl.Label>Name</FormControl.Label>
    <FormControl.HintText>This will be publicly visible</FormControl.HintText>
    <Input name="name" />
</FormControl>

Help popover

Use help popovers to aid first-time users or to clarify complex concepts. The help popover can contain interactive content and may be used to provide links for further information.

<FormControl maxWidth="240px">
    <FormControl.LabelWrapper>
        <FormControl.Label>Card limit</FormControl.Label>
        <FormControl.Help aria-label="Learn more about: Card limit">
            You can set two types of limits on cards: monthly limits reset at the beginning of every
            month, whereas total limits apply from when you first set them and have to be reset
            manually. <Link href="#">Read more</Link>
        </FormControl.Help>
    </FormControl.LabelWrapper>
    <Input name="card-limit" />
</FormControl>

Error

Provide clear and helpful error messages that guide users toward a solution. Instead of merely stating the problem, ensure the message is specific and actionable. Avoid vague or shaming language.

<FormControl maxWidth="240px">
    <FormControl.Label>Email (required)</FormControl.Label>
    <Input name="email" isInvalid />
    <FormControl.Error>Enter your email address</FormControl.Error>
</FormControl>

Skeleton

Use a "skeleton" version of this component to display a loading state while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.

<FormControl maxWidth="240px" skeleton>
    <FormControl.Label>Email</FormControl.Label>
    <Input name="email" value="jeppe@pleo.io" skeleton />
</FormControl>

Disabled

Disable a form element to indicate that it’s currently unavailable. This can be used to maintain layout consistency and communicate that the element may become available later. If the form element will never be available in a given context, leave it out.

<FormControl maxWidth="240px">
    <FormControl.Label>Email</FormControl.Label>
    <Input name="email" value="jeppe@pleo.io" disabled />
</FormControl>

Prefix

To enhance usability for sighted users, use a prefix to visually indicate the type of input expected. For example, place a search icon in a search field to help users immediately recognize its purpose.

<FormControl maxWidth="240px">
    <FormControl.Label>Search</FormControl.Label>
    <Input placeholder="Search..." name="search" type="search" prefix={<Search size={16} />} />
</FormControl>

Postfix

Add a postfix to visually indicate the type of input expected, enhancing usability for sighted users. An example would be to display supplementary information, such as a unit or currency symbol, at the end of the input field.

<FormControl maxWidth="240px">
    <FormControl.Label>Amount</FormControl.Label>
    <Input name="amount" postfix="USD" />
</FormControl>

Underlined

Use an underlined input in cases where the default bordered variant would add significant visual clutter (e.g. for multiple inputs within a table component).

<FormControl maxWidth="240px">
    <FormControl.Label>Email</FormControl.Label>
    <Input name="email" value="jeppe@pleo.io" variant="underlined" />
</FormControl>

Accessibility

The implementation of this component has been informed by our form accessibility guidelines.

Best practices

Refer to our Forms guidelines for general advice on forms structure, validation, and more.

Related components

• Currency input: An enhanced input field that provides visual and non-visual cues to a user when entering an amount of money in a specified currency.
• Date input: Enable users to input a date — either in a textfield or with a date picker.
• Form control: Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text.
• Search: An input that allow users to find content by entering a search term.
• Textarea: A form element that enables users to enter text on multiple lines.