Use when input text should be a number.
States
Properties
Tone
Sets the color treatment of the Text field.
Label
A label is displayed by default but can be hidden using the `Label` property.
Label action
Toggle to display an action to the right of the field label.
Help text
Toggle to display help text below the field.
Error
Use the `State` property to display the field with a validation error.
Prefix
Toggle to display an icon or text to the left of the input value.
Clear button
Toggle to display a clear button to the right of the input value.
Use when the expected input could be more than one line.
States
Properties
Tone
Sets the color treatment of the Text field.
Label
A label is displayed by default but can be hidden using the `Label` property.
Label action
Toggle to display an action to the right of the field label.
Help text
Toggle to display help text below the field.
Error
Use the `State` property to display the field with a validation error.
Max length
Toggle to display a max character count for the field.
A text field is an input field that merchants can type into. It has a range of options and supports several text formats including numbers.
States
Borderless
Toggle to remove the visual border from the field.
Properties
Size
Change the size of the text field.
The `slim` size is used in the `Filter` component.
Tone
Sets the color treatment of the Text field.
Label
A label is displayed by default but can be hidden using the `Label` property.
Label action
Toggle to display an action to the right of the field label.
Help text
Toggle to display help text below the field.
Error
Use the `State` property to display the field with a validation error.
Prefix
Toggle the `Prefix` property to display an icon or text to the left of the input value.
Suffix
Toggle the `Suffix` property to display an icon or text to the right of the input value.
Clear button
Toggle to display a clear button to the right of the input value.