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.

Environment

Branch

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.

Notes

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.

Include archivedShows runs that were cancelled.Only my deployments

Auto-deploy stagingTakes effect immediately — no Save.Pause all workflowsUnavailable here

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.

Dates, and the icon the dark theme could not reach

<input type="date"> appears in 26 files across the platform and ::-webkit-calendar-picker-indicator is styled in none of them. Chrome and Safari draw that little calendar glyph themselves, in a fixed near-black that no amount of `color` changes — so on the dark theme it was a dark icon on a dark field. Compare the two below.

light

dark

And the value it wants is not toISOString().slice(0, 10)

That line appears 129 times across 78 files — the most duplicated line in the platform — and it quietly picks UTC for something that is not a UTC concept. Use dateValue(), timeValue() and dateTimeValue(), which make the choice explicit — and note that dateTimeValue defaults to local, because a datetime-local input fed a UTC string shows a 09:00 clock-in as 02:00.

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.
dateValue() / timeValue() / dateTimeValue() for a date input's value — never toISOString().slice(0, 10).

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.