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
Keep labels persistent
The label should survive once a person starts typing.
Use a floating label
A persistent label names the field at rest and after it is filled, so the purpose never disappears.
Do not rely on a placeholder alone
A placeholder-only field loses its name the moment someone types, hurting memory and accessibility.
Write validation people can act on
An error message should explain how to fix the value.
Enter a valid email like name@work.com
Invalid
Describe the fix
Say what a valid value looks like, for example the expected email or format, not just that it is wrong.
Do not say only invalid
A one-word error forces guessing; pair the error state with a concrete, specific message.
Let the layout own spacing
Group related fields and let the surrounding form control rhythm.
Split distinct values
Give each distinct value its own field so validation and autofill can target them precisely.
Do not overload one field
Combining separate values into a single field breaks autofill, validation, and error targeting.