Toggle Group

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

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/toggle-group.tsx

Import from@viliha/vui-react/toggle-group

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

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-react/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>
  );
}

ToggleGroup props

Plus everything React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> accepts, passed straight through to the underlying element.

Prop	Type	Default
spacing?	number	0

ToggleGroupItem props

It takes no props of its own. Everything you pass reaches the underlying ToggleGroupPrimitive.Item primitive, so every attribute it accepts works here unchanged and nothing is invented on top.