Label
Sits above every input field to tell the student what to fill in. Turns red-asterisk when the field is required.
Variants
Type
Two types: default for optional fields, required for fields the student can't skip. The red asterisk draws the eye without cluttering the field.
Hint
Pass a hint string to add the question-mark icon. Use it when the field name alone doesn't explain what's expected — keep the hint short and specific.
Usage
Put a Label above every input, select, or textarea in a form. Always pass the for prop with the input's id so tapping the label focuses the field. On small screens where input tap targets are tight, this makes a real difference.
Be consistent with required: if you mark some fields, mark all mandatory ones. Students learn the pattern fast — one unmarked required field breaks their trust.
Do's & Don'ts
Do
- Always link label to input. Pass
for="input-id". Skip this and the label is just decoration — it won't focus the field on tap. - Mark every mandatory field. Use
requiredon all fields the student can't leave blank. Don't make them discover it at submission. - Keep it short. One or two words. "Correo electrónico", "Contraseña", "Fecha de nacimiento". Move longer explanations into
hint.
Don't
- Don't use it outside a form. It's a form element. For headings or captions elsewhere, use a regular text style instead.
- Don't write full sentences as the label. "Please enter your full legal name" belongs in
hint, not the label itself. - Don't mix required conventions. If you use asterisks on some required fields but not others, students won't know what to trust.
Related: Option Card (label-like text inside answer choices)