import { RadioGroup, Radio, RadioParts } from '@cerberus/react'Usage
The Radio component is a controlled component that can be used to select one option from a set. Simply wrap the Radio components in a RadioGroup component to create a group of radio buttons.
Orientation
The RadioGroup component supports two orientations: horizontal, and vertical. The default orientation is horizontal.
Sizes
The Radio component supports two sizes: sm, and md. The default size is sm.
Primitives
You can utilize the primitive components or the css prop to customize the radio.
| Component | Description |
|---|---|
| RadioGroupRoot | The context provider for the RadioGroup parts |
| RadioGroupLabel | The label of the radio |
| RadioGroupIndicator | The indicator of the radio state |
| RadioGroupItem | The container of the label and control of the radio |
| RadioGroupItemText | The label for a single radio |
| RadioGroupItemControl | The visual input of a single radio |
| RadioGroupItemHiddenInput | The native input for the radio |
API
Props
RadioGroup
The RadioGroup component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| orientation | horizontal | This orientation of the group. |
The RadioGroup component also accepts all the props of the RadioGroupRoot primitive props
Radio
The Radio component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| size | sm | The size of the radio. |
The Radio component also accepts all the props of the RadioGroupItem primitive props
Parts
The RadioParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The RadioGroupRoot component which is the Provider for the family. |
| Label | The RadioGroupLabel component which displays the label and "required" notice. |
| Indicator | The RadioGroupIndicator component which displays based on the checked state. |
| Item | The RadioGroupItem component which is the container to a single radio item. |
| ItemText | The RadioGroupItemText component which is the label of the radio. |
| ItemControl | The RadioGroupItemControl component which is the visual field. |
| HiddenInput | The RadioGroupHiddenInput component which displays the native input. |
On this page