119 lines
2.7 KiB
Plaintext
119 lines
2.7 KiB
Plaintext
---
|
|
title: Toggle Group
|
|
description: A set of two-state buttons that can be toggled on or off.
|
|
author:
|
|
name: imskyleen
|
|
url: https://github.com/imskyleen
|
|
---
|
|
|
|
<ComponentPreview name="radix-toggle-group-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="radix-toggle-group" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<ToggleGroup>
|
|
<ToggleGroupItem>A</ToggleGroupItem>
|
|
<ToggleGroupItem>B</ToggleGroupItem>
|
|
<ToggleGroupItem>C</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Multiple
|
|
|
|
<ComponentPreview name="radix-toggle-group-multiple-demo" />
|
|
|
|
## Props
|
|
|
|
<div className="flex flex-row gap-x-3">
|
|
<ExternalLink
|
|
href="https://www.radix-ui.com/primitives/docs/components/toggle-group"
|
|
text="Docs"
|
|
/>
|
|
<ExternalLink
|
|
href="https://www.radix-ui.com/primitives/docs/components/toggle-group#api-reference"
|
|
text="API Reference"
|
|
/>
|
|
</div>
|
|
|
|
### Animate UI props
|
|
|
|
#### ToggleGroup
|
|
|
|
<TypeTable
|
|
type={{
|
|
type: {
|
|
description: 'The type of the toggle group',
|
|
type: 'single' | 'multiple',
|
|
required: true,
|
|
},
|
|
transition: {
|
|
description: 'The transition of the toggle group',
|
|
type: 'Transition',
|
|
required: false,
|
|
default: "{ type: 'spring', bounce: 0, stiffness: 200, damping: 25 }",
|
|
},
|
|
activeClassName: {
|
|
description: 'The class name of the active toggle group item',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
variant: {
|
|
description: 'The variant of the toggle group',
|
|
type: 'default' | 'outline',
|
|
required: false,
|
|
default: 'default',
|
|
},
|
|
size: {
|
|
description: 'The size of the toggle group',
|
|
type: 'default' | 'sm' | 'lg',
|
|
required: false,
|
|
default: 'default',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
#### ToggleGroupItem
|
|
|
|
<TypeTable
|
|
type={{
|
|
children: {
|
|
description: 'The children of the toggle group item',
|
|
type: 'React.ReactNode',
|
|
required: true,
|
|
},
|
|
buttonProps: {
|
|
description: 'The props of the toggle group item button',
|
|
type: 'HTMLMotionProps<"button">',
|
|
required: false,
|
|
},
|
|
spanProps: {
|
|
description: 'The props of the toggle group item span',
|
|
type: 'React.HTMLAttributes<HTMLSpanElement>',
|
|
required: false,
|
|
},
|
|
variant: {
|
|
description: 'The variant of the toggle group item',
|
|
type: 'default' | 'outline',
|
|
required: false,
|
|
default: 'default',
|
|
},
|
|
size: {
|
|
description: 'The size of the toggle group item',
|
|
type: 'default' | 'sm' | 'lg',
|
|
required: false,
|
|
default: 'default',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
## Credits
|
|
|
|
- We use [Radix UI](https://www.radix-ui.com/primitives/docs/components/toggle-group) for the toggle group component.
|
|
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/toggle-group) for the toggle group style.
|