Inputs
Text field
The foundation of every form: a labelled single-line input with filled and outlined surfaces, leading and trailing slots, helper text, and error states connected to the theme.We only use it to send the invite
At least 8 characters
This city is not supported yet
Capture one line of text
Reach for m-text-field whenever a person types a short, single-line value such as a name, email, amount, or password.
- Two surface variantsFilled and outlined cover the MD3 surface treatments; the shared field shell keeps both consistent.
- Floating labelThe label doubles as a placeholder and animates above the value once the field is populated or focused.
- Native input typesSwitch between text, email, number, and password while keeping one visual and accessible contract.
- Leading and trailing slotsPrepend and append slots add icons or actions without breaking label alignment or target size.
- Supporting and error textHelper text guides input; the error state swaps it for a message and recolors the field.
- Validation awareA path binds the field to a vee-validate form, and aria-invalid plus aria-describedby stay in sync.
A quick look
The variant changes the surface, not the meaning of the field.
Supporting text
Supporting text
Filled for dense forms
A tinted container separates fields on plain backgrounds and long stacked forms.
Outlined for clarity
A visible boundary reads well on busy surfaces and keeps fields distinct at a glance.
Related input components
Specialized fields build on the same shell and interaction contract.
Textarea
Multi-line
A resizable field for longer, multi-line text with an optional counter.
Number input
Numeric
A field for numeric entry with stepper controls and min/max limits.
Autocomplete
Suggestions
A text field paired with a filtered list of selectable options.
File input
Files
A field-styled control that captures one or more file selections.