Components
Toggle Group
A grouped set of toggles for single or multiple selections with the same compact visual language.
Loading...
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
1
Install the component
Run the registry command below to add toggle-group to your project.
watermelon add toggle-group2
Import the component
Import Toggle Group from your local UI registry output.
Import
import { ToggleGroup } from "@/components/ui/toggle-group";Import
Import
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";Usage
Use toggle groups when a set of view or platform options should share the same visual affordance.
Loading...
API Reference
| prop | type | default | description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Sets whether one or many items can stay selected. |
| value / defaultValue | string | string[] | - | Controls the selected item or items. |
| onValueChange | (value: string | string[]) => void | - | Called when the selected set changes. |