ToggleGroup

A set of toggles that share one state. The corners facing a neighbour are squared off, the set owns the value, and the shared props are set once for every member.

import { Toggle, ToggleGroup } from 'neba';

<ToggleGroup aria-label="Text alignment" defaultValue={['left']}>
  <Toggle value="left">Left</Toggle>
  <Toggle value="center">Center</Toggle>
  <Toggle value="right">Right</Toggle>
</ToggleGroup>;

Props

Prop	Type	Default	Description
variantshared	'solid' | 'outline' | 'text'	—	Applied to every toggle in the set. Unset means the Toggle's own default stands
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	—	Height and type scale for every toggle in the set
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	—	Colour role for every toggle in the set. A toggle's own prop still wins
densityshared	'default' | 'compact'	—	Horizontal padding for every toggle in the set
elevationshared	0 | 1 | 2 | 3	—	Drop shadow depth for every toggle in the set
value	readonly string[]	—	Which toggles are on, by their value. An array in both the single and the multiple case
defaultValue	readonly string[]	—	Which start on, for an uncontrolled set
onValueChange	(value: string[]) => void	—	Fired on every change
multiple	boolean	false	Whether more than one can be on at a time. Off, turning one on turns the last one off
orientationshared	'horizontal' | 'vertical'	'horizontal'	Which way the toggles run. Vertical flattens the top and bottom corners instead
disabled	boolean	—	Disables every toggle in the set at once
loopFocus	boolean	true	Whether the arrow keys wrap around at the ends
fullWidth	boolean	false	Stretches to the container and divides the width evenly between the toggles
children	ReactNode	—	The toggles. The shared props reach them even through a wrapper

Every <div> attribute passes through. variant, size, color, density, elevation and disabled are passed to every Toggle in the set; a toggle's own prop still wins, so one danger toggle in a set of neutral ones is a normal thing to write.

Examples

value and onValueChange

The value is an array in both the single and the multiple case, so turning multiple on does not change its type. value with onValueChange makes the set controlled; defaultValue makes it uncontrolled.

multiple

Off, which is the default, means turning one toggle on turns the last one off. If what is being chosen is a value rather than a set of states, SegmentedButton or RadioGroup is the component that says so.

import { useState } from 'react';
import { Toggle, ToggleGroup } from 'neba';

export default function ToggleGroupMultiple() {
  const [marks, setMarks] = useState<readonly string[]>(['bold']);

  return (
    <div className="flex flex-col items-center gap-4">
      <ToggleGroup multiple aria-label="Marks" value={marks} onValueChange={setMarks}>
        <Toggle value="bold">Bold</Toggle>
        <Toggle value="italic">Italic</Toggle>
        <Toggle value="underline">Underline</Toggle>
      </ToggleGroup>

      <p className="text-[0.75rem] text-(--neba-muted-fg)">
        {marks.length > 0 ? marks.join(', ') : 'none'}
      </p>
    </div>
  );
}

variant

The set's variant reaches every toggle in it.

import { Toggle, ToggleGroup } from 'neba';

const variants = ['solid', 'outline', 'text'] as const;

export default function ToggleGroupVariants() {
  return (
    <div className="flex flex-col items-center gap-5">
      {variants.map((variant) => (
        <ToggleGroup key={variant} aria-label={variant} variant={variant} defaultValue={['week']}>
          <Toggle value="day">Day</Toggle>
          <Toggle value="week">Week</Toggle>
          <Toggle value="month">Month</Toggle>
        </ToggleGroup>
      ))}
    </div>
  );
}

orientation

vertical stacks the toggles and squares off the horizontal seams instead. The arrow keys follow the orientation.

import { Toggle, ToggleGroup } from 'neba';

export default function ToggleGroupOrientation() {
  return (
    <ToggleGroup orientation="vertical" aria-label="Density" defaultValue={['cosy']}>
      <Toggle value="compact">Compact</Toggle>
      <Toggle value="cosy">Cosy</Toggle>
      <Toggle value="roomy">Roomy</Toggle>
    </ToggleGroup>
  );
}

fullWidth

Stretches to the container and divides the width evenly between the toggles.

import { Toggle, ToggleGroup } from 'neba';

export default function ToggleGroupFullWidth() {
  return (
    <div className="w-full max-w-md">
      <ToggleGroup fullWidth aria-label="View" defaultValue={['board']}>
        <Toggle value="list">List</Toggle>
        <Toggle value="board">Board</Toggle>
        <Toggle value="calendar">Calendar</Toggle>
      </ToggleGroup>
    </div>
  );
}

Accessibility

• The set is one tab stop; the arrow keys move between the toggles and loopFocus decides whether they wrap at the ends.
• A group has no name of its own: give it an aria-label.