Switch (peer + sr-only, role="switch") — color × appearance (solid / soft) × size, optional ON/OFF state labels. solid fills the rail; soft inverts and fills the thumb.
default solid (checked)
solid (unchecked)
soft (checked)
soft (unchecked)
Sizes
With state label (solid only, md / lg)
With description
Error state
Disabled
Switch (peer + sr-only, role="switch") — color × appearance (solid / soft) × size, optional ON/OFF state labels. solid fills the rail; soft inverts and fills the thumb.
default solid (checked)
solid (unchecked)
soft (checked)
soft (unchecked)
Sizes
With state label (solid only, md / lg)
With description
Error state
Disabled
Switch (peer + sr-only, role="switch") — color × appearance (solid / soft) × size, optional ON/OFF state labels. solid fills the rail; soft inverts and fills the thumb.
default solid (checked)
solid (unchecked)
soft (checked)
soft (unchecked)
Sizes
With state label (solid only, md / lg)
With description
Error state
Disabled