Radio

Botones de radio para seleccionar una opción de un conjunto.

Importar

import { Radio } from 'asterui'

Ejemplos

Uso básico

Usa Radio.Group para gestionar la selección de radio.

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

Diseño horizontal

Botones de radio en una fila 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 tamaños

Botones de radio en varios tamaños.

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

Colores

Variantes de botones de radio coloreados.

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 deshabilitado

Botones de radio deshabilitados.

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

En formulario

Grupo de radio en un formulario con validación.

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`

Propiedad	Descripción	Tipo	Predeterminado
`children`	Componentes Radio	`React.ReactNode`	-
`value`	Valor seleccionado actual (controlado)	`string \| number`	-
`defaultValue`	Valor seleccionado predeterminado (no controlado)	`string \| number`	-
`onChange`	Callback cuando cambia la selección	`(e: { target: { value: string \| number, name?: string } }) => void`	-
`name`	Nombre para todas las entradas de radio en el grupo	`string`	-
`className`	Clases CSS adicionales	`string`	-

`Radio`

Propiedad	Descripción	Tipo	Predeterminado
`value`	Valor del radio (requerido cuando está en Radio.Group)	`string \| number`	-
`children`	Contenido de etiqueta (envuelve en elemento label)	`React.ReactNode`	-
`size`	Tamaño del botón de radio	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`color`	Variante de color del botón de radio	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'`	-
`disabled`	Estado deshabilitado	`boolean`	`false`
`className`	Clases CSS adicionales	`string`	-

Accesibilidad

Usa elementos nativos <input type="radio"> para accesibilidad completa
Radio.Group usa role="radiogroup" para semántica apropiada
Las entradas de radio comparten el atributo name dentro de un grupo
Las etiquetas están conectadas apropiadamente para apuntar al hacer clic
Navegación por teclado con teclas de flecha dentro de grupos
El estado deshabilitado se comunica apropiadamente a tecnologías asistivas