Radio / RadioGroup
Accessible radio group for single-selection from a set of options.
Live Demo
Preferred contact method
We'll send updates to your inbox.
We'll call you during business hours.
Short text messages to your mobile.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | RadioOption[] | — | componentPages.radio_prop_options |
value | string | — | componentPages.radio_prop_value |
onValueChange | (value: string) => void | — | componentPages.radio_prop_onValueChange |
orientation | 'horizontal' | 'vertical' | 'vertical' | componentPages.radio_prop_orientation |
disabled | boolean | false | componentPages.radio_prop_disabled |
label | string | — | componentPages.radio_prop_label |
Usage
import { RadioGroup, Radio } from '@ghiberti85/ui'
const options = [
{ value: 'email', label: 'Email', description: 'Sent to your inbox.' },
{ value: 'phone', label: 'Phone', description: 'During business hours.' },
{ value: 'sms', label: 'SMS', description: 'Short text messages.' },
]
// Vertical (default)
<RadioGroup
label="Preferred contact method"
options={options}
onValueChange={setValue}
/>
// Horizontal
<RadioGroup
label="Layout"
options={options}
orientation="horizontal"
/>
// Controlled
<RadioGroup
label="Plan"
options={options}
value={value}
onValueChange={setValue}
/>