Form Controls
Apply text fields, selects, textareas, checkboxes, radios, switches, and date controls in real forms.
What you will learn
- Choose the right control.
- Preserve labels and errors.
- Avoid fragile custom form behavior.
Choose by data shape
Use text fields for short free text, textarea for longer content, select for a bounded list, radio for a small visible exclusive choice, checkbox for independent choices, and switch for an immediately applied binary setting.
Labels and hints
Placeholder text is an example, not a label. Keep the label visible after entry and connect hint or error text programmatically.
- Unique id and name
- Visible label
- Autocomplete where applicable
- Correct input type
- Error association
Custom selects and dates
Custom popovers must support keyboard movement, Escape, focus restoration, and viewport-aware placement. Native controls are preferable when advanced rendering is not necessary.