Field
The text input students type into. Carries every state from resting to error, so every form feels alive.
Variants
Size
Large is the default for full-width forms like sign-up or profile screens. Medium fits tighter spaces, like a search bar above a lesson list.
Status
Default sits quietly until a student interacts. Hover and focus brighten the field so it's clear where typing will land. Disabled locks it down completely.
Result
Use result to confirm or reject what the student typed. Pair error with a short message explaining what to fix.
Icons
The right icon shows the field's result on its own: a circle by default, a warning triangle on error, a check on success. Turn on the left icon when the field needs extra context, like a hint about formatting.
Usage
Use Field for anything a student types: their name, a class code, an open-ended answer. Pair it with a Label above so it's always clear what goes in the box.
Switch to result="error" only after the student tries to submit, and switch back to none as soon as they start fixing it. Don't leave a field stuck in error once it's valid again.
Combinations
Stack a Label above every Field, especially when required. Follow a form with a primary Button ("Join class", "Save changes") and keep it disabled until every required field is filled.
Do's & Don'ts
Do
- Pair every Field with a Label. Students need to know what they're filling in before they tap.
- Clear the error as soon as it's fixed. Switch back to
result="none"the moment the input becomes valid. - Keep placeholders short and concrete. "e.g. DINO-204" tells students more than "Enter code".
Don't
- Don't combine error and success. A field carries one result at a time, never both.
- Don't use disabled to mean "optional." Disabled means the student can't interact with it at all, not just that it's not required.
- Don't rely on color alone for errors. Add a short message so the issue is clear without it.
Related: Label (sits above every Field to say what goes in it) · Button (the action that submits the form)