Switch

Switches apply an immediate binary setting. In Nuxt / PLAI use USwitch.

Element	Source
Track (off), thumb, label text	Nuxt UI zinc neutrals
Track (on)	CI --ci-color-brand-blue
Focus ring	CI link blue

Live examples

Email me when processing completes Off Nuxt UI

Include anonymised metadata On CI

Managed by your organisation

HTML

<label class="ci-switch">
  <input type="checkbox" role="switch" name="notify" />
  <span class="ci-switch__track" aria-hidden="true"></span>
  <span>Email me when processing completes</span>
</label>

Use role="switch" on the checkbox input for assistive technology. The visible track is decorative (aria-hidden="true"); the label text names the setting.

Accessibility

• Label text must describe the on state (“Email me…”, not “Notifications”).
• Keyboard: Space toggles the control when focused.
• Focus ring appears on the track when the input has :focus-visible.
• Do not use a switch for actions that need confirmation — use a Button instead.

When to use

Control	Use when
Switch	Instant on/off; effect applies without a separate save
Checkbox	Form field; multi-select; legal consent
Radio	Pick one of several named options