Checkboxalternative
Use Checkbox for multiple selectionsRadioGroup
Single selection from a list of mutually exclusive options
Setup
import { RadioGroup } from '@fragments-sdk/ui';Examples
Default
Basic radio group with labels
Loading preview...
With Helper Text
Radio items with additional context
Loading preview...
Horizontal
Side-by-side layout
Loading preview...
With Group Helper Text
Group-level helper text
Loading preview...
With Error
Validation error state (string shows error message)
Loading preview...
Disabled
Non-interactive state
Loading preview...
Styling Targets
Use explicit class names for wrapper/group/item styling hooks
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | Not set | Controlled selected value |
defaultValue | string | Not set | Default value (uncontrolled) |
onValueChange | function | Not set | Callback when selection changes |
onChange | function | Not set | Alias for onValueChange |
orientation | enumhorizontalvertical | vertical | Layout orientation |
disabled | boolean | false | Disable all options |
name | string | Not set | Form field name |
label | string | Not set | Group label |
helperText | string | Not set | Helper text shown below the group |
error | union | Not set | Show error styling. When a string is provided, it is displayed as an error message. |
size | enumsmmdlg | md | Size variant |
wrapperClassName | string | Not set | Class name for the outer wrapper element |
groupClassName | string | Not set | Class name for the inner radio group element |
childrenRequired | node | Not set | RadioGroup.Item elements |
Usage Guidelines
When to use
- User must select exactly one option from a small set
- Options are mutually exclusive
- All options should be visible at once
- 2-5 options available
When not to use
- Multiple selections allowed (use Checkbox group)
- Many options (use Select)
- Binary on/off choice (use Switch)
- Options need to be searchable (use Combobox)
Best practices
- Always have one option pre-selected when possible
- Order options logically (alphabetical, frequency, etc.)
- Keep option labels concise
- Use helperText on RadioGroup.Item for complex options
Accessibility
- Group must have an accessible label
- Use arrow keys to navigate between options
- Selected option should be clearly indicated