A 16px knob in an 18px track, drawn 192 ways. Seven axes on one container, and the largest single variant set in the kit.
Two components, 192 variants
Switch - Size × Active × State × Type × Control Placement × Show Label × Show Description: default · sm × Off · On × Default · Focus · Invalid · Disabled × Default · Box × Start · End × three text arrangements
Switch Group - none: 320 × 332 - six rows stacked at a 16 gap
Using the Switch
Why 192 and not 256?
Because the description cannot exist without the label. Two sizes times two positions times four states times two types times two placements is 128, and each is drawn three ways: label with description, label alone, control alone. The fourth - a description with nothing to describe - is not a thing anyone builds. Count the text arrangements as three rather than two independent booleans and the sum comes out at 192 first time.
What are the actual measurements?
The track is 32 by 18 with a 16 knob, or 24 by 14 with a 12 knob at sm. The knob sits 1 in from the top and 1 in from whichever end, so its travel is the track minus the knob minus 2. That single pixel of clearance is what makes it read as a knob in a slot rather than a circle sitting on a bar.
How many colours does it use?
Two. Off is base.input, on is base.primary, and the knob is base.background in both. Focus adds a base.ring outside the track; Invalid adds a destructive 1px edge plus the same colour at a fifth as a 2px halo. Nothing else is drawn - no border at rest, no shadow, no third tone.
What does Type Box change?
It wraps the same row in 10 of padding on a radius.lg edge, and fills with base.primary once the switch is on. That inverts the text: the label goes to base.primary-foreground and the description to colors.muted-foreground-dark, which keeps the label the louder of the two. Checkbox and Radio Group do the same, so all three siblings read alike.
Why is the Switch Group worth publishing?
Because the gap is the decision. It is six instances in a column at 16 apart and nothing else - no heading, no rule, no card. Having it in the file means nobody has to guess whether settings rows sit 12, 16 or 24 apart, and a real settings screen is this plus a title above it.
Does direction matter?
More than for most components. On means the knob has moved away from where reading starts, so in an RTL layout it should rest on the left rather than the right. The row order comes from dir, but the knob's travel has to flip with it or on and off quietly swap meaning. Mirroring the track horizontally does it without touching the offset - no variant needed.