Basic
Text fields components are used for collecting user provided information.
Default
Density
Text fields components are used for collecting user provided information.
Compact
Variant
Text fields components are used for collecting user provided information.
Outlined
Filled
Solo
Plain
Underline
State
Text fields can be disabled or readonly.
Disabled
Readonly
Counter
Text fields can be disabled or readonly.
Regular
Limit exceeded
Clearable
When clearable, you can customize the clear icon with clear-icon.
Regular
Custom Colors
Use color prop to change the input border color.
Regular
Icons
Use color prop to change the input border color.
Prepend
Prepend Inner
Append
Append Innter
Prefixes and suffixes
The prefix and suffix properties allows you to prepend and append inline non-modifiable text next to the text field.
Amount
Weight
Email
Label Text
Label Slot
Text field label can be defined in label slot - that will allow to use HTML content.
Password input
Using the HTML input type password can be used with an appended icon and callback to control the visibility.