Radio

Botões de rádio para selecionar uma opção de um conjunto.

Importação

import { Radio } from 'asterui'

Exemplos

Uso Básico

Use Radio.Group para gerenciar seleção de rádio.

Option 1Option 2Option 3

import { Radio, Space } from 'asterui'

function App() {
  return (
      <Radio.Group defaultValue="1">
        <Space size="sm">
          <label className="flex items-center gap-2 cursor-pointer">
            <Radio value="1" />
            <span>Option 1</span>
          </label>
          <label className="flex items-center gap-2 cursor-pointer">
            <Radio value="2" />
            <span>Option 2</span>
          </label>
          <label className="flex items-center gap-2 cursor-pointer">
            <Radio value="3" />
            <span>Option 3</span>
          </label>
        </Space>
      </Radio.Group>
    )
}

export default App

Layout Horizontal

Botões de rádio em uma linha horizontal.

AppleOrangeBanana

import { Radio } from 'asterui'

function App() {
  return (
      <Radio.Group defaultValue="apple">
        <div className="flex gap-4">
          <label className="flex items-center gap-2 cursor-pointer">
            <Radio value="apple" />
            <span>Apple</span>
          </label>
          <label className="flex items-center gap-2 cursor-pointer">
            <Radio value="orange" />
            <span>Orange</span>
          </label>
          <label className="flex items-center gap-2 cursor-pointer">
            <Radio value="banana" />
            <span>Banana</span>
          </label>
        </div>
      </Radio.Group>
    )
}

export default App

Diferentes Tamanhos

Botões de rádio em vários tamanhos.

import { Radio, Space } from 'asterui'

function App() {
  return (
      <Space size="sm">
        <label className="flex items-center gap-2">
          <Radio size="xs" defaultChecked />
          <span className="text-xs">Extra Small</span>
        </label>
        <label className="flex items-center gap-2">
          <Radio size="sm" />
          <span className="text-sm">Small</span>
        </label>
        <label className="flex items-center gap-2">
          <Radio size="md" />
          <span>Medium</span>
        </label>
        <label className="flex items-center gap-2">
          <Radio size="lg" />
          <span className="text-lg">Large</span>
        </label>
        <label className="flex items-center gap-2">
          <Radio size="xl" />
          <span className="text-xl">Extra Large</span>
        </label>
      </Space>
    )
}

export default App

Cores

Variantes de botões de rádio coloridos.

import { Radio } from 'asterui'

function App() {
  return (
      <div className="flex flex-wrap gap-4">
        <Radio color="primary" defaultChecked />
        <Radio color="secondary" />
        <Radio color="accent" />
        <Radio color="info" />
        <Radio color="success" />
        <Radio color="warning" />
        <Radio color="error" />
      </div>
    )
}

export default App

Estado Desabilitado

Botões de rádio desabilitados.

Disabled uncheckedDisabled checked

import { Radio, Space } from 'asterui'

function App() {
  return (
      <Space size="sm">
        <label className="flex items-center gap-2">
          <Radio disabled />
          <span className="opacity-50">Disabled unchecked</span>
        </label>
        <label className="flex items-center gap-2">
          <Radio disabled defaultChecked />
          <span className="opacity-50">Disabled checked</span>
        </label>
      </Space>
    )
}

export default App

Em Formulário

Grupo de rádio em um formulário com validação.

import { Radio, Space, Form, Modal } from 'asterui'
import { useState } from 'react'

function App() {
  const [submittedData, setSubmittedData] = useState<any>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  
  const handleSubmit = (values: { plan?: string }) => {
    setSubmittedData(values);
    setIsModalOpen(true);
  };
  
  return (
      <Form onFinish={handleSubmit} initialValues={{ plan: 'basic' }}>
        <Form.Item name="plan" label="Choose a plan" rules={{ required: 'Please select a plan' }}>
          <Radio.Group>
            <Space size="sm">
              <label className="flex items-center gap-2 cursor-pointer">
                <Radio value="basic" />
                <div>
                  <div className="font-semibold">Basic</div>
                  <div className="text-sm opacity-70">$10/month</div>
                </div>
              </label>
              <label className="flex items-center gap-2 cursor-pointer">
                <Radio value="pro" />
                <div>
                  <div className="font-semibold">Pro</div>
                  <div className="text-sm opacity-70">$20/month</div>
                </div>
              </label>
              <label className="flex items-center gap-2 cursor-pointer">
                <Radio value="enterprise" />
                <div>
                  <div className="font-semibold">Enterprise</div>
                  <div className="text-sm opacity-70">Contact us</div>
                </div>
              </label>
            </Space>
          </Radio.Group>
        </Form.Item>
        <button type="submit" className="btn btn-primary">
          Continue
        </button>
      </Form>
  
      <Modal
        open={isModalOpen}
        onCancel={() => setIsModalOpen(false)}
        title="Form Submitted"
        footer={null}
      >
        <div className="py-4">
          <p className="mb-4">Form data:</p>
          <pre className="bg-base-200 p-4 rounded-lg overflow-auto max-h-96">
            {JSON.stringify(submittedData, null, 2)}
          </pre>
        </div>
      </Modal>
    )
}

export default App

API

`Radio.Group`

Propriedade	Descrição	Tipo	Padrão
`children`	Componentes Radio	`React.ReactNode`	-
`value`	Valor selecionado atual (controlado)	`string \| number`	-
`defaultValue`	Valor selecionado padrão (não controlado)	`string \| number`	-
`onChange`	Callback quando seleção muda	`(e: { target: { value: string \| number, name?: string } }) => void`	-
`name`	Nome para todas as entradas de rádio no grupo	`string`	-
`className`	Classes CSS adicionais	`string`	-

`Radio`

Propriedade	Descrição	Tipo	Padrão
`value`	Valor do rádio (obrigatório quando em Radio.Group)	`string \| number`	-
`children`	Conteúdo do rótulo (envolve em elemento label)	`React.ReactNode`	-
`size`	Tamanho do botão de rádio	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`color`	Variante de cor do botão de rádio	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'`	-
`disabled`	Estado desabilitado	`boolean`	`false`
`className`	Classes CSS adicionais	`string`	-

Acessibilidade

Usa elementos nativos <input type="radio"> para acessibilidade completa
Radio.Group usa role="radiogroup" para semântica apropriada
Entradas de rádio compartilham atributo name dentro de um grupo
Rótulos são conectados apropriadamente para direcionamento de clique
Navegação por teclado com teclas de seta dentro de grupos
Estado desabilitado é comunicado apropriadamente às tecnologias assistivas