<TextField label='Street Address' value='Ruukinkatu 2' clearButtonVisible />
Common input field features
Text Field includes all shared input field features.
A placeholder is a short description of the expected input value. It’s only shown when the text field is empty.
Placeholders aren’t universal substitutes for labels, as they are only visible while the field is empty. Helpers are a better way to provide information that the user may need when filling in the field. Unless marked as required, fields with placeholders also risk being inadvertently skipped when filling in a form.
Search fields are a good example of where placeholders can be used without a label, if they are prefixed or suffixed with a search icon or next to a search button.
Fields with placeholders, but without labels, should also provide an invisible label using the
aria-label attribute to ensure that screen readers can access it.
The optional clear button clears the field’s current value. It’s hidden while the field is empty. Clear buttons are useful for search and filter fields, where it’s common for the user to want to clear the field value. However, in data entry forms, they are typically unnecessary.
<TextField value='Value' clearButtonVisible />
Three different text alignments are supported: left (default), center, and right.
Right-aligned values are recommended for numerical values when presented in vertical groups, as this makes it easier to interpret and compare values.
<VerticalLayout theme='spacing'> <TextField value='Left' /> <TextField value='Center' theme='align-center' /> <TextField value='Right' theme='align-right' /> </VerticalLayout>