Radio / RadioGroup
Grupo de rádio acessível para seleção única de um conjunto de opções.
Demonstração
Método de contato preferido
Enviaremos atualizações para sua caixa de entrada.
Ligaremos para você em horário comercial.
Mensagens curtas para o seu celular.
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
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 |
Uso
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}
/>