Components/Buttons/ToggleGroup

ToggleGroup

Buttons

Exclusive or multi-select group of Toggle buttons.

Renders ToggleGroupItem children as a connected strip separated by 1px Slate-4 dividers. Supports Radix type="single" (mutually exclusive) and type="multiple" (multi-select).

Usage

import { ToggleGroup, ToggleGroupItem } from "nosible-ux"

export default function Example() {
  return (
    <ToggleGroup type="multiple">
      <ToggleGroupItem value="earnings">Earnings</ToggleGroupItem>
      <ToggleGroupItem value="guidance">Guidance</ToggleGroupItem>
      <ToggleGroupItem value="macro">Macro</ToggleGroupItem>
    </ToggleGroup>
  )
}

Examples

Single-select (view switcher)

Multi-select (filter chips)

Accessibility

Built on Radix ToggleGroup: arrow-key navigation between items, role="group", and pressed state management are handled.

Props

Name	Type	Default	Description
`asChild`	`boolean \| undefined`	—
`defaultValue`	`string \| string[] \| undefined`	—	The value of the item that is pressed when initially rendered. Use `defaultValue` if you do not need to control the state of a toggle group. The value of the items that are pressed when initially rendered. Use `defaultValue` if you do not need to control the state of a toggle group.
`dir`	`Direction \| undefined`	—
`disabled`	`boolean \| undefined`	`false`	Whether the group is disabled from user interaction.
`intent`	`"default" \| "outline" \| null \| undefined`	—
`loop`	`boolean \| undefined`	—
`onValueChange`	`((value: string) => void) \| ((value: string[]) => void) \| undefined`	—	The callback that fires when the value of the toggle group changes. The callback that fires when the state of the toggle group changes.
`orientation`	`"horizontal" \| "vertical" \| undefined`	—
`rovingFocus`	`boolean \| undefined`	`true`	Whether the group should maintain roving focus of its buttons.
`size`	`"sm" \| "md" \| "lg" \| "icon" \| null \| undefined`	—
`type`	`"single" \| "multiple"`	—
`value`	`string \| string[] \| undefined`	—	The controlled stateful value of the item that is pressed. The controlled stateful value of the items that are pressed.

← All Components Getting Started →