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

Multi-select — tokens, and ⌫ removes the last

Urgent

Each pick becomes a token carrying its own hidden input, so the form posts tag_ids[] exactly as a multiple <select> would. The box stays a search field — typing in it does not disturb what is chosen.

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

live — type to filter, ↑↓ to move, Enter to choose

A text input that filters a list and writes an id. The visible input holds a label; a hidden field holds the value that gets posted — so typing after choosing clears the value, because a box reading one thing while posting another is worse than an empty one. Set data-combobox-url-value and the panel is fetched per keystroke instead, as an HTML fragment of .combobox-options.

With status indicator

With image and secondary text

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.