RadioGroupalternative
RadioGroup for form-style single selectionToggleGroup
A group of toggle buttons where only one can be selected at a time. Useful for switching between views, modes, or options.
Setup
import { ToggleGroup } from '@fragments-sdk/ui';Examples
Default
Basic toggle group
Loading preview...
Pills Variant
Pill-shaped toggle buttons
Loading preview...
Outline Variant
Outlined toggle buttons
Loading preview...
Uncontrolled
Use defaultValue for simple single-select state
Loading preview...
Sizes
Different size variants
Loading preview...
View Switcher
Common pattern for switching between views
Loading preview...
With Disabled Item
Toggle group with a disabled option
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | Not set | Currently selected value |
defaultValue | string | Not set | Initial selected value (uncontrolled) |
onChange | function | Not set | Called with new value when selection changes |
onValueChange | function | Not set | Alias for onChange (Radix convention): (value: string) => void |
childrenRequired | node | Not set | ToggleGroup.Item components |
variant | enumdefaultpillsoutlineoutlined | default | Visual style |
size | enumsmmdlg | md | Size variant |
gap | enumsmnonexs | xs | Gap between items (pills/outline variants) |
selectionMode | enumsingle | single | Selection behavior |
Usage Guidelines
When to use
- Switching between mutually exclusive views or modes
- Selecting one option from a small set (2-5 options)
- Fragmented controls like view switchers
- Filter or sort options
When not to use
- Multiple selections allowed (use Checkbox group)
- Many options (use Select or RadioGroup)
- Navigation between pages (use Tabs)
- On/off toggle (use Switch component)
Best practices
- Keep options to 2-5 items for clarity
- Use clear, concise labels
- Consider icons for common actions (grid/list view)
- Ensure adequate touch targets on mobile
Accessibility
- Uses role="radiogroup" for single-selection semantics
- Each item has role="radio" with aria-checked
- Keyboard navigable with Tab and arrow keys
- Focus visible on active item