UI Library
Textfield
Text fields with variants, adornments, password inputs, and floating labels.
A standard outlined text field with a clean border and comfortable spacing.
Use compact density to reduce vertical space without changing the overall structure.
Use Solo, Outlined, Underlined, Filled, and Plain variants to change the appearance of the field.
Disabled and readonly states keep the same layout while reducing interactivity.
A counter helps track the current length against the maximum allowed characters.
Clearable text fields expose a quick action for resetting the current value.
Border and focus colors can be adjusted per field when a different emphasis is needed.
Prepend and append icons help frame common search and notification patterns.
Affixes are useful for IDs, currencies, and other fixed units.
Single-line input keeps the text constrained to one row.
Validation feedback should sit near the field and remain easy to scan.
Interactive icons can trigger actions without leaving the field context.
Helper copy can sit under the field without interrupting the label.
Password fields can expose a visibility toggle while preserving the same shell.
Slots can host icons on both sides of the input for denser compositions.
Floating labels stay inside the field until the field is focused or filled, similar to the Valex floating-label pattern.