Three toggles as one control - joined behind a single border, spaced apart as separate ones, or stretched to fill the row.
One component, five variants
Toggle Group - Type × Orientation: Default · With Spacing · Fill × Horizontal · Vertical - Fill / Vertical is not published
Using the Toggle Group
What do the three types mean?
How the members are held together. Default butts them behind one base.input border with a 1px divider between each pair, so the strip reads as a single control. With Spacing drops the container entirely and switches the toggles to Outline, so each carries its own edge and they read as three separate controls - 8 between them in either orientation. Fill keeps the container but lets the members share the row equally instead of hugging their labels.
Why not just butt three Outline toggles together?
Because you get two borders at every join and a strip a pixel taller than its parts. The joined types put the edge on the container and leave the toggles bare, with a drawn 1px rectangle where the seam should be. That is one border, one radius, and one height.
How does the source do it?
With selectors a design file cannot express: data-[spacing=0] strips the rounding from every member, first: and last: put it back on the two ends, and border-l-0 with first:border-l removes every left border but the first. The picture is the same as the file's; only the mechanism differs, which matters when you rebuild it in code.
Where is Fill / Vertical?
Not in the file - five of the six combinations are drawn. Filling along the vertical axis needs a parent with a height to fill, which is the part a component cannot carry. Take Default / Vertical and let the group stretch inside whatever gives it that height.
Single or multiple?
The rule between the members, and it is the one thing no drawing can show. Single lets one in at a time and is right when the options are mutually exclusive - alignment, a view switcher, a date range. Multiple lets any number in and is right for formatting marks. A reader cannot tell them apart by looking, so if the difference matters, the strip usually needs a label above it.
Should a single-select group ever be empty?
Only when no-choice is a real state. The source's single mode is collapsible: pressing the member that is already on turns it off. That is right for a filter you can clear and wrong for alignment, where text is always aligned somehow. Decide it deliberately rather than inheriting the default.
Can the members be icon only?
Yes, and that is the common case - the source's min-w-9 exists so a member can be square. It comes with the same requirement as a lone Toggle: an aria-label on every member and a tooltip on any glyph that is at all ambiguous. Three unlabelled icons in a row are three guesses.
Does it work right to left?
The order and the dividers reverse on their own, because the dividers are children of a flex row rather than borders on one side of each member. Two things need care. The rounded ends in code are first:rounded-l-md and last:rounded-r-md, which are physical - swap them for rounded-s-md and rounded-e-md or the strip comes apart under rtl. And the icons follow the Toggle page's rule: alignment glyphs mirror, bold and italic do not.
Is there a usage frame?
No - this page in the file is the Components board and nothing else. The examples on this page are the kit's answer to that: single-select alignment, multi-select marks, a view switcher, a segmented filter on the Fill type, and the argument for choosing between joined and spaced.