N-Way Switch

An exclusive-select toggle switch for any number of options, with icons, labels, and a dedicated off state.

Installation

npx shadcn@latest add https://your-domain.com/r/n-way-switch.json

Props

PropTypeDefaultDescription
optionsNWaySwitchOption[]requiredThe segments to render. Each needs a value, a label, and an icon.
valuestring-Selected value, for controlled use.
defaultValuestringfirst optionSelected value, for uncontrolled use.
onValueChange(value: string) => void-Called when the selection changes.
collapsible"none" | "labels" | "full""none"Controls whether labels show inline, in a tooltip, or the switch collapses to one icon.
disabledbooleanfalseDisables the whole switch.
aria-labelstring-Accessible name for the switch group.
options[].isOffbooleanfalseMarks this option as the off position. Selecting it renders without the on fill.