Aspyn

Toggle Group

Grouped toggles — single or multiple selection.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens
import { ToggleGroup, ToggleGroupItem } from "@aspyn-io/kit";

Single choice (view switcher)

<ToggleGroup type="single" defaultValue="total" variant="outline">
  <ToggleGroupItem value="total">Total</ToggleGroupItem>
  <ToggleGroupItem value="by-status">By Status</ToggleGroupItem>
</ToggleGroup>

Multiple (filters)

<ToggleGroup type="multiple" defaultValue={["breaks"]}>
  <ToggleGroupItem value="cancelled">Cancelled</ToggleGroupItem>
  <ToggleGroupItem value="breaks">Breaks</ToggleGroupItem>
  <ToggleGroupItem value="completed">Completed</ToggleGroupItem>
</ToggleGroup>

Notes

  • type="single" behaves like radio; type="multiple" like checkboxes.