ToggleGroup

A segmented group of toggle buttons where one item (single mode) or many items (multiple mode) can be active at once.

Installation

npx @obi/ui add toggle-group

Preview

Usage

'use client';

import { useState } from 'react';
import { ToggleGroup, ToggleGroupItem } from '@/src/components/ToggleGroup/ToggleGroup';

export default function Example() {
  const [align, setAlign] = useState('left');

  return (
    <div className="flex flex-col gap-4">
      <ToggleGroup type="single" value={align} onValueChange={setAlign}>
        <ToggleGroupItem value="left">Left</ToggleGroupItem>
        <ToggleGroupItem value="center">Center</ToggleGroupItem>
        <ToggleGroupItem value="right">Right</ToggleGroupItem>
      </ToggleGroup>
    </div>
  );
}

Props

NameTypeDefaultDescription
type"single" | "multiple"—Controls whether one or many items can be active at once.
valuestring | string[]—Controlled value. String for single mode, string[] for multiple.
onValueChange(value: string | string[]) => void—Called with the new value when selection changes.
size"sm" | "md" | "lg""md"Controls height and padding of all items.
disabledbooleanfalseDisables all items in the group.