Docs

Input fields

All input field components share a common set of features.

Label

An input field should have a label to identify it. Labels should be clear, concise, and written in sentence case. Avoid unclear and verbose language. Use helper texts to give more guidance, or tooltips in case a helper text can’t be accommodated.

<EmailField label='Email address' />

In situations where enough context is provided, such as grid filters and search fields, visible labels can be omitted. In such cases, an aria-label attribute should be provided instead to identify the field, so that users of assistive technologies can interpret the input correctly.

Helper

Helpers provide information when needed so that end users can fill in a form or field without errors. For example, they are helpful when the field requires a specific format. Helpers typically consist of plain text, but HTML and other components are also supported.

<TextField
  label='Phone number'
  helperText='Include country prefix'
/>

Required

Input fields can be either optional or required. Optional fields are typically left unmarked. In the default theme, required fields are marked with a bullet character. It’s recommended to provide hint text to let users know how required fields are marked:

<HorizontalLayout theme='spacing'>
  <TextField
    label='Name'
    required
    errorMessage='Name is required'
  />
  <DatePicker label='Date of birth' />
</HorizontalLayout>

Non-editable fields

Sometimes, the user isn’t allowed to edit the value of certain fields. Those fields can made read-only or disabled, depending on the situation. Choose the appropriate choice.

<HorizontalLayout theme='spacing'>
  <TextField label='Read-only' readonly value='Value' />
  <TextField label='Disabled' disabled value='Value' />
</HorizontalLayout>

Focus

Focus styles are used to highlight the active element, which is useful for keyboard navigation. The focus style is different for keyboards and pointing devices.