Text field

The Text field component allows user to type in text.

Default

Use to allow users to provide text input when the expected input is short. For longer input, use the multiline option.

Placeholder

Use to provide a short, non-essential hint about the expected input. Placeholder text is low-contrast, so don’t rely on it for important information.

Icon

Use for specific controlled usage, for example a search bar.

Multiline

Use when the expected input could be more than one line.

Optional

Use optional indicator to let users know that a selection isn't required.

Optional

Error

Let users know if their input is valid or if there’s an error.

Disabled

Use to show that a textfield is not available for interaction.

Props

  • label string

    Label for the text field

  • placeholder string

    Example text to display as placeholder

  • multiline boolean

    Use taller multiline input with resize icon

  • optionalIndicator boolean

    Visual optional indicator, add an 'optional' badge to the label

  • labelHidden boolean

    Visually hide the label

  • disabled boolean

    Disable input

  • error boolean | Error

    Display an error state