RadioGroup

RadioGroup renderiza um conjunto completo e rotulado de controles Radio a partir de opções. Escolha-o quando uma decisão precisa de tratamento de campo compartilhado; use Radio avulso para uma composição personalizada ou Select quando a lista conhecida funciona melhor recolhida.

Exemplos

Uma escolha visível

defaultValue define uma seleção inicial não controlada, enquanto cada opção pode adicionar um hint curto quando só o rótulo não basta para deixar clara a diferença.

Contact preference

EmailWritten updates and receiptsPhoneDo not contact me

Choose the best way to reach you.

Uma linha compacta

Defina direction="row" apenas quando os rótulos forem curtos e comparáveis. As opções ainda compartilham um name nativo, então o navegador preserva a exclusão mútua e a navegação por setas.

Billing cycle

MonthlyYearly

Quando usar

Use RadioGroup para uma escolha em uma lista curta e visível que se beneficia de rótulo, texto de ajuda ou mensagem de validação compartilhados.

Prefira outro componente quando:

Os controles precisam de composição ou posicionamento personalizados — use Radio avulso e dê o mesmo name a cada item.
A lista funciona melhor recolhida ou é longa demais para varrer — use Select para uma lista conhecida, ou Combobox quando a pessoa precisa filtrar.
Mais de uma escolha pode ser verdadeira — use CheckboxGroup em vez de forçar uma resposta única.

Acessibilidade

Renderiza uma div com role="radiogroup"; quando existe label, seu id gerado entra em aria-labelledby junto de qualquer id fornecido.
Os controles compostos são inputs radio nativos com um name compartilhado (gerado quando name é omitido). As setas nativas percorrem o grupo e selecionar um limpa os demais.
hint e error são mensagens visíveis abaixo das opções. error substitui hint; este componente não conecta nenhum dos dois programaticamente ao radiogroup.
Um value controlado continua sob controle de quem chama. Atualize-o em onChange depois que o componente informar a nova string selecionada.

API e código

Nome	Tipo	Obrigatória	Descrição
`label`	`ReactNode`	—	Label rendered above the group.
`hint`	`ReactNode`	—	Helper text rendered below the group when no error is present.
`error`	`ReactNode`	—	Error message rendered below the group in place of `hint`.
`options`	`RadioGroupOption[]`	—	Radio options rendered by the group. Default: `[]`.
`value`	`string`	—	Selected value in controlled mode.
`defaultValue`	`string`	—	Initially selected value in uncontrolled mode.
`onChange`	`(value: string) => void`	—	Called with the selected option value.
`name`	`string`	—	Shared native name for the radio controls. Generated automatically when omitted.
`direction`	`'column' \| 'row'`	—	Layout direction for the options. Default: `"column"`.

Sem React, use um wrapper radiogroup, um name nativo compartilhado e as mesmas classes de campo:

html

<div class="lyra-field" role="radiogroup" aria-labelledby="contact-preference">
  <span class="lyra-label" id="contact-preference">Contact preference</span>
  <div class="lyra-choicegroup">
    <label class="lyra-check-row">
      <input class="lyra-radio" type="radio" name="contact" value="email" checked />
      <span>Email</span>
    </label>
    <label class="lyra-check-row">
      <input class="lyra-radio" type="radio" name="contact" value="phone" />
      <span>Phone</span>
    </label>
  </div>
  <span class="lyra-hint">Choose the best way to reach you.</span>
</div>

<lyra:radio-group> Gerado do lyra-ds/blade v0.10.0.

Prop	Padrão	Obrigatória	Valores de exemplo
`label`	`null`	—	—
`hint`	`null`	—	`Choose one`
`error`	`null`	—	`Required`
`options`	`[]`	—	—
`value`	`null`	—	—
`defaultValue`	`null`	—	—
`name`	`null`	—	—
`direction`	`'column'`	—	`row`

blade

<lyra:radio-group
    name="plan"
    label="Plan"
    hint="You can switch plans at any time."
    :options="[
        ['value' => 'starter', 'label' => 'Starter', 'hint' => 'Up to 3 projects'],
        ['value' => 'pro', 'label' => 'Pro', 'hint' => 'Unlimited projects'],
        ['value' => 'enterprise', 'label' => 'Enterprise', 'disabled' => true],
    ]"
    default-value="pro"
/>