Form controls

The rest of the form vocabulary: toggles, checkbox and radio patterns, card-style choice groups, comboboxes, and action panels. Checked state is CSS-only via :has() — no JavaScript in the lab.

Toggles

Simple

Small

With icon

Disabled

<label class="toggle">
  <input type="checkbox" class="sr-only" checked>
  <span class="toggle-thumb"></span>
</label>

Checkbox patterns

List with descriptions

Notifications

Inline description

Checkbox on right

Simple list with heading

Include in export

Radio groups

Simple list

Inline list

List with descriptions in panel

Cards

Small cards

<label class="choice-card">
  <input type="radio" name="plan" class="sr-only" checked>
  <span class="flex-1">…</span>
</label>

Comboboxes

panels shown open — filtering needs a Stimulus controller

With status indicator

app-01
app-02
app-03 offline

With image and secondary text

AR Alex Rivera @alex
SW Sam Whitford @samw
JT Jo Tanaka @jo

Action panels

Need a hand?

The runbook covers the common recovery steps for this appliance.

Open the runbook

Renew certificate

portal.bms.com.au expires in 14 days.

Two-factor authentication

Require a second factor for all operators on this site.

Invite an operator

They'll get an email with access to this site only.

Reset site cache

Clears cached device state. Safe to run at any time.

Danger zone

Decommission this site and archive its history.