MenuCaderno UI
npmGitHub
Theme

<cad-switch>

Switch

Turn a setting on or off immediately. Use Checkbox for choices submitted with a form.

Auto-save

Sizes

Small

Medium

Large

When to use it

Use Switch for immediate settings, Checkbox for choices submitted together, and Radio for one choice from a group. Never use a switch to confirm an irreversible action.

Sizes

Sizes are sm, md, and lg. Checked is blue; unchecked is neutral. Prefer one size per interface.

Saving a change

Disable the switch while saving. Add a labeled Spinner beside it if feedback is needed; loading is not a Switch state.

API reference: <cad-switch>

checkedcheckedbooleanfalsedisableddisabledbooleanfalsehinthintstring''labellabelstring''namenamestring''requiredrequiredbooleanfalsesizesizeCadSwitchSize'md'valuevaluestring'on'checkedbooleancheckedyesdisabledbooleandisabledyeshintstringhintnolabelstringlabelnonamestringnameyesrequiredbooleanrequiredyessizeCadSwitchSizesizeyesvaluestringvaluenoinputEventFired immediately when the checked state changes.changeEventFired after the checked state changes.labelVisible setting label. Falls back to the `label` attribute.hintSupporting consequence or context. Falls back to `hint`.baseNative label and full hit target.controlNative checkbox exposed with switch semantics.hintSupporting description.labelVisible setting label.thumbMovable switch thumb.trackHand-drawn switch track.--cad-switch-accentChecked track and focus color.--cad-switch-surfaceUnchecked track surface.

Accessibility

Uses role="switch" with a visible label and Space-key activation. Supports native form validation and reset. The hit target stays at least 44 pixels high, including at the small size.

MIT licensed. Built with Caderno UI.Report an issue
Back to top