npm

Toggle Group

Toggle Group is a set of toggle buttons for single or multiple selection.

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/toggle-group.

Usage

Use type="single" or type="multiple"; variant/size set on the group cascade to items.

toggle-group-demo.tsx
import { ToggleGroup, ToggleGroupItem } from "@viliha/vui-ui/toggle-group";

export function Example() {
  return (
    <ToggleGroup type="multiple" variant="outline">
      <ToggleGroupItem value="bold">B</ToggleGroupItem>
      <ToggleGroupItem value="italic">I</ToggleGroupItem>
      <ToggleGroupItem value="underline">U</ToggleGroupItem>
    </ToggleGroup>
  );
}