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.
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' />
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>
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 styles are used to highlight the active element, which is useful for keyboard navigation. The focus style is different for keyboards and pointing devices.