Default

A simple text input for typing some text.

Editable example
<TextInput label="Basic text input" />
<TextInput label="Basic text input" />

Best practices

1. Provide a visual label unless the purpose of the input is communicated or implied from its context, in which case a label still must be provided but can be hidden visually using the labelHidden prop.
2. Avoid mixing and matching sizes. If a medium sized TextInput is used, don't use a large SegmentedControl next to it.
3. Always use the appropriate type for inputs. E.g. for email addresses use TextInputType.Email which gives the appropriate keyboard on mobile.

Label and placeholder

Use a label to indicate what the input text is for e.g. Page title, Email address etc. A placeholder can be used to provide a hint or example for the text. If the purpose of the input is communicated by its context, the labelHidden prop can be used to hide it visually but keep it accessible by assistive technology.

Editable example
<TextInput label="Your email" placeholder="you@email.com" type={TextInputType.Email} />
<TextInput labelHidden label="Contextually clear label" placeholder="Input with hidden label" />
<TextInput label="Your email" placeholder="you@email.com" type={TextInputType.Email} />
<TextInput labelHidden label="Contextually clear label" placeholder="Input with hidden label" />

Types

By default, TextInput is type="text". This can be changed with the TextInputType enum in the type prop. TextInputType.Search is also an option, but in most cases you should use a SearchInput instead.

Editable example
<TextInput type={TextInputType.Email} label="Email input" value="user@email.com" />
<TextInput type={TextInputType.Password} label="Password input" value="hunter2" />
<TextInput type={TextInputType.Number} label="Number input" value="1234" />
<TextInput type={TextInputType.Telephone} label="Telephone input" value="123 456 789" />
<TextInput type={TextInputType.Email} label="Email input" value="user@email.com" />
<TextInput type={TextInputType.Password} label="Password input" value="hunter2" />
<TextInput type={TextInputType.Number} label="Number input" value="1234" />
<TextInput type={TextInputType.Telephone} label="Telephone input" value="123 456 789" />

Size

Use larger sizes for forms and smaller sizes for contextual or compact interfaces. Typically all inputs in a given context should all share a consistent size between them.

Editable example
<TextInput size={TextInputSize.XSmall} label="XSmall" />
<TextInput size={TextInputSize.Small} label="Small" />
<TextInput size={TextInputSize.Medium} label="Medium" />
<TextInput size={TextInputSize.Large} label="Large" />
<TextInput size={TextInputSize.XSmall} label="XSmall" />
<TextInput size={TextInputSize.Small} label="Small" />
<TextInput size={TextInputSize.Medium} label="Medium" />
<TextInput size={TextInputSize.Large} label="Large" />

Theme

Use the dark theme when placed on a dark surface such as a dark popover or card.

Editable example
<Card theme={CardTheme.Dark}>
  <div className="space-inset-m">
    <TextInput theme="dark" label="Dark theme 🥷" />
  </div>
</Card>
<Card theme={CardTheme.Dark}>
  <div className="space-inset-m">
    <TextInput theme="dark" label="Dark theme 🥷" />
  </div>
</Card>

Start/end elements

The startElement and endElement props take any ReactNode. This is useful for placing an icon or button at the star/end of an input. The size of the element will automatically adjust the padding inside the input so that the text won't be overlapped by the elements.

Editable example
<TextInput startElement={<Edit />} label="Start element" />
<TextInput endElement={<IconButton icon={<Tick />} size={ButtonSize.Small} />} label="End element" />
<TextInput startElement={<Edit />} label="Start element" />
<TextInput endElement={<IconButton icon={<Tick />} size={ButtonSize.Small} />} label="End element" />

Multiline

Allow a text input to span multiple lines using the multiline prop. Use this for capturing information that's likely to be one or more sentences such as a description or message.

Editable example
<TextInput multiline label="Multiline input" />
<TextInput multiline label="Multiline input" />

Variants

In most cases the default bordered input should be used. For standalone inputs that are part of smaller or tightly packed components (such as an image card overlay or within a navbar) the Underlined variant works best. Use the Borderless variant in areas where the input needs to seamlessly fit within another component, for example an input that sits within a Toolbar.

Editable example
<TextInput variant={TextInputVariant.Bordered} label="Bordered" />
<TextInput variant={TextInputVariant.Underlined} label="Underlined" placeholder="Underlined" />
<TextInput variant={TextInputVariant.Borderless} labelHidden label="Borderless" placeholder="Borderless" />
<TextInput variant={TextInputVariant.Bordered} label="Bordered" />
<TextInput variant={TextInputVariant.Underlined} label="Underlined" placeholder="Underlined" />
<TextInput variant={TextInputVariant.Borderless} labelHidden label="Borderless" placeholder="Borderless" />

Error states

Use the error prop to communicate invalid inputs to the user. Avoid displaying validation as the user is typing. The preferred interaction is to validate on blur if the user has typed something. Any errors should also be displayed on inputs when a form is attempted to be submitted.

Editable example
<TextInput
  label="Email address"
  type={TextInputType.Email}
  error="Please enter a valid email address"
/>
<TextInput
  label="Email address"
  type={TextInputType.Email}
  error="Please enter a valid email address"
/>

Disabled

Use the disabled prop to communicate that an input exists, but cannot be interacted with.

Editable example
<TextInput disabled label="Disabled input" />
<TextInput disabled label="Disabled input" />

Readonly

Use the readOnly prop to allow text to be selected and copied, but not edited or deleted. Do not use readOnly if the input doesn't have any text in it.

Editable example
<TextInput readOnly label="Read-only input" value="Some read-only text" />
<TextInput readOnly label="Read-only input" value="Some read-only text" />

Accessibility

• Always provide a descriptive label even when using the labelHidden prop. This will be read by screen readers when the input is focused even when it's not visibly shown.
• Placeholders can be used to display a hint or suggestion, but don't rely on them as a substitute for an actual label.
• Use the built in error prop to display error messages and avoid using tooltips around inputs for errors.