ContextQMD
Back to Shadcn Ui

Toggle Group

apps/v4/content/docs/components/base/toggle-group.mdx

latest2.1 KB
Original Source
<ComponentPreview styleName="base-nova" name="toggle-group-demo" />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">Command</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">
bash
npx shadcn@latest add toggle-group
</TabsContent> <TabsContent value="manual"> <Steps className="mb-0 pt-2">

<Step>Install the following dependencies:</Step>

bash
npm install @base-ui/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="toggle-group" title="components/ui/toggle-group.tsx" styleName="base-nova" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </CodeTabs>

Usage

tsx
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
tsx
<ToggleGroup type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>

Examples

Outline

Use variant="outline" for an outline style.

<ComponentPreview styleName="base-nova" name="toggle-group-outline" />

Size

Use the size prop to change the size of the toggle group.

<ComponentPreview styleName="base-nova" name="toggle-group-sizes" />

Spacing

Use spacing to add spacing between toggle group items.

<ComponentPreview styleName="base-nova" name="toggle-group-spacing" />

Vertical

Use orientation="vertical" for vertical toggle groups.

<ComponentPreview styleName="base-nova" name="toggle-group-vertical" />

Disabled

<ComponentPreview styleName="base-nova" name="toggle-group-disabled" />

Custom

A custom toggle group example.

<ComponentPreview styleName="base-nova" name="toggle-group-font-weight-selector" previewClassName="*:data-[slot=field]:max-w-xs" />

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

<ComponentPreview styleName="base-nova" name="toggle-group-rtl" direction="rtl" />

API Reference

See the Base UI Toggle Group documentation.