Toggle Group
A set of toggles where one or several stay pressed. For alignment, ranges and view modes.
Usage
import { ToggleGroup, ToggleGroupItem } from "@zynactra/ui/toggle-group"<ToggleGroup defaultValue={["7d"]}>
<ToggleGroupItem value="24h">24h</ToggleGroupItem>
<ToggleGroupItem value="7d">7 days</ToggleGroupItem>
</ToggleGroup>value is always an array. Add multiple to allow several pressed items. variant, size and orientation apply to every item.
Guidelines
- Two to five options. More than that, use Select.
- Give the group an
aria-labelthat names the choice ("Date range"). - To switch between panels of content, use Tabs instead.
API reference
Behaviour and props come from Base UI. See the Base UI Toggle Group docs.