SGDS Switch Component Skill

<sgds-switch> is a toggle switch for binary on/off states. Labels can be placed to the right (default slot) or left (left-label slot). Use size to match it to adjacent UI elements.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Show X/check icons in the toggle? → Add icon

Pre-turned-on? → Add checked

Disabled toggle? → Add disabled

Label to the left? → Use slot="left-label" instead of the default slot