Radio

Boutons radio pour sélectionner une option parmi un ensemble.

Import

import { Radio } from 'asterui'

Exemples

Utilisation basique

Utilisez Radio.Group pour gérer la sélection des boutons 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

Disposition horizontale

Boutons radio sur une ligne horizontale.

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

Différentes tailles

Boutons radio dans diverses tailles.

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

Couleurs

Variantes de boutons radio colorés.

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

État désactivé

Boutons radio désactivés.

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

Dans un formulaire

Groupe de boutons radio dans un formulaire avec validation.

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`

Propriété	Description	Type	Défaut
`children`	Composants Radio	`React.ReactNode`	-
`value`	Valeur sélectionnée actuelle (contrôlée)	`string \| number`	-
`defaultValue`	Valeur sélectionnée par défaut (non contrôlée)	`string \| number`	-
`onChange`	Callback lorsque la sélection change	`(e: { target: { value: string \| number, name?: string } }) => void`	-
`name`	Nom pour toutes les entrées radio du groupe	`string`	-
`className`	Classes CSS supplémentaires	`string`	-

`Radio`

Propriété	Description	Type	Défaut
`value`	Valeur du radio (requise dans Radio.Group)	`string \| number`	-
`children`	Contenu de l’étiquette (enveloppé dans un élément label)	`React.ReactNode`	-
`size`	Taille du bouton radio	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`color`	Variante de couleur du bouton radio	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'`	-
`disabled`	État désactivé	`boolean`	`false`
`className`	Classes CSS supplémentaires	`string`	-

Accessibilité

Utilise des éléments natifs <input type="radio"> pour une accessibilité complète
Radio.Group utilise role="radiogroup" pour une sémantique appropriée
Les entrées radio partagent l’attribut name au sein d’un groupe
Les étiquettes sont correctement connectées pour le ciblage au clic
Navigation au clavier avec les touches fléchées au sein des groupes
L’état désactivé est correctement communiqué aux technologies d’assistance