Form controls
Select, Textarea, Checkbox and Switch — all of them the native element, styled.
Why native
A custom listbox has to reimplement typeahead, Home/End, option virtualisation, and — the one everybody forgets — the fact that on a phone the platform picker is a far better control than anything rendered in a div. The cost is that an open menu cannot be styled. That is a small price for a control that works everywhere.
Branch or tag to deploy.
Textarea
Resizable vertically only — horizontal resize lets someone drag it out of the layout, and every “the form is broken” report that follows is really this.
Checkbox and Switch are not the same control
The difference is when the change lands. A switch applies immediately; a checkbox applies when the form is submitted. Putting a switch in a form with a Save button tells people their change is already saved when it is not.
Both wrap their label, so the words are part of the hit target — a 16px box is hard to hit on a phone, and the text beside it is where people aim. Switch is a real <input type="checkbox"> underneath with role="switch", so it is focusable, form-associated and announced correctly without reimplementing any of it.
Guidance
Use it when
- Always inside a Field — it binds the label and wires errors with aria-describedby.
- Switch for a setting that applies now; Checkbox for one that applies on submit.
- Select once there are more than about seven options; FilterBar below that.
Reach for something else when
- A custom dropdown. You will spend a week on typeahead and still lose the phone picker.
- A Switch inside a form with a Save button.
- Placeholder text as the label — it vanishes exactly when someone needs to check what they are filling in.