Toggles

Dimensions

Track sizes and hit areas across platforms.

Switch

Checkbox

Radio

Typography

Labels follow the platform body type. Size matches form-field labels.

Color styles

All "on" states use the brand accent. Platform conventions override on iOS (green switch, blue radio).

Web

iOS

Android · M3

Motion

All thumb/dot transitions use the same easing for consistency.

Spacing

Gap between control and label, and between stacked controls.

Pick the right control

If you can't decide, you've probably misread the question.

Labels describe the state, not the action

Stack consistently

When you have a vertical list of toggles, always put the control on the left so the labels share a left edge. iOS list rows are the only exception — there the platform expects switches on the right.

Radio vs. Select

Don't mix platforms

A single screen should ship one toggle vocabulary — web, iOS, or Android. Never mix the iOS green switch with the Android M3 thumb in the same view, even if the rest of the screen is "platform-agnostic." It looks like a bug.

Accessibility

Toggles are state. State has to be announced.

• Native <input type="checkbox" role="switch"> on web — gets the right semantics for free.
• Always wrap in a <label> so the label is part of the hit target and the screen reader pairing.
• Use aria-checked="mixed" for indeterminate checkboxes.
• Focus ring must be visible — minimum 2px outline at --accent-primary on web.
• Hit area: minimum 44×44 pt on touch devices, even when the visible track is smaller.

Web (HTML)

Always wrap the input in a label so the label and box share a hit area.

Switch

<label class="toggle">
  <input type="checkbox" role="switch" checked>
  <span class="track"><span class="thumb"></span></span>
  <span class="label">Auto-renew protection</span>
</label>

Checkbox

<label class="check">
  <input type="checkbox">
  <span class="box"><svg ... /></span>
  <span class="label">I agree</span>
</label>

Radio group

<fieldset class="radio-group">
  <legend>Plan</legend>
  <label class="radio">
    <input type="radio" name="plan" checked>
    <span class="dot"></span>
    Monthly · $9.99
  </label>
</fieldset>

iOS · SwiftUI

// Switch
Toggle("Auto-renew protection", isOn: $autoRenew)
  .tint(.cloakedAccent)

// Checkbox (custom — UIKit/SwiftUI has no native check)
CloakedCheck(isOn: $accepted)
  .label("I agree to the terms")

// Radio (Picker with .segmented or custom)
Picker("Plan", selection: $plan) {
  Text("Monthly").tag(Plan.monthly)
  Text("Annual").tag(Plan.annual)
}
.pickerStyle(.inline)

Android · Jetpack Compose

// Switch (M3)
Switch(
  checked = autoRenew,
  onCheckedChange = { autoRenew = it },
  thumbContent = { if (autoRenew) Icon(Icons.Filled.Check, null) }
)

// Checkbox
Checkbox(checked = accepted, onCheckedChange = { accepted = it })

// Radio
RadioButton(selected = plan == Plan.Monthly, onClick = { plan = Plan.Monthly })

Props

• checked — boolean state
• onChange — fired on commit
• disabled — opacity 0.5, cursor not-allowed
• indeterminate — checkbox only
• label — required, never blank
• helper — optional supporting text
• name — required for radio groups
• platform — "web" | "ios" | "android"

CSS tokens

/* Track */
--toggle-track-off: var(--border-strong);
--toggle-track-on: var(--accent-primary);

/* Indicator */
--toggle-thumb: #FFFFFF;
--toggle-check: #FFFFFF;
--toggle-dot: var(--accent-primary);

/* Motion */
--toggle-ease: cubic-bezier(0.16, 1, 0.3, 1);
--toggle-duration: 180ms;