Components
iOSAndroid
Installation
pnpm dlx @docyrus/cli add @docyrus/rn-toggle-groupUsage
import { ToggleGroup, ToggleGroupItem } from '@/components/docyrus-native/toggle-group';
<ToggleGroup value={view} onValueChange={setView}>
<ToggleGroupItem value="list">List</ToggleGroupItem>
<ToggleGroupItem value="grid">Grid</ToggleGroupItem>
<ToggleGroupItem value="board">Board</ToggleGroupItem>
</ToggleGroup>API Reference
ToggleGroup
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'single' | 'multiple' | 'single' | Selection mode |
value | string | string[] | — | Selected value(s) |
onValueChange | (value: string | string[]) => void | — | Value change handler |
size | 'sm' | 'md' | 'lg' | 'md' | Item size |
variant | 'default' | 'outline' | 'default' | Visual variant |
disabled | boolean | false | Disable all items |
children | ReactNode | — | ToggleGroupItem elements |
className | string | — | Additional CSS classes |
ToggleGroupItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Item value (required) |
children | ReactNode | — | Item content |
disabled | boolean | false | Disable this item |
className | string | — | Item CSS classes |
textClassName | string | — | Text CSS classes |
Components
| Component | Description |
|---|---|
ToggleGroup | Root container with context provider |
ToggleGroupItem | Individual toggle item |
Type Exports
| Type | Description |
|---|---|
ToggleGroupProps | Props for ToggleGroup |
ToggleGroupItemProps | Props for ToggleGroupItem |
ToggleGroupType | 'single' | 'multiple' |
ToggleGroupSize | 'sm' | 'md' | 'lg' |
ToggleGroupVariant | 'default' | 'outline' |