Text field
Single-line input field, e.g. for an email address.
Select
Dropdown with the same dimensions as a text field — custom arrow instead of the browser default.
Textarea
Multi-line field for longer input, e.g. a message.
Checkbox
Binary option, always with a visible, clickable label next to it.
Best practices
Associate the label via for/id
Every field needs a <label for="..."> with a matching id — clicking the label focuses the field, and screen readers announce the label correctly.
Placeholder is not a label
A placeholder disappears once typing starts and is not read as a label by many screen readers — it supplements the label but never replaces it.
Style the select like a text field
A <select>'s default browser arrow often breaks the uniform height. Using appearance-none with a custom arrow icon achieves the same height and look as an <input>.
Visible focus state
Every field needs a clearly visible focus ring for keyboard users — here via the brand color Lochmara, not just a subtle border-color change.