Radio Group

Grupo de botones de opción para selección única

Componente de grupo de opciones construido con Ark UI. Usa la API de conveniencia con options y opcional label, o la API compuesta para layout personalizado.

FrameworkReactVueSvelte

import { RadioGroup } from "@/components/ui/radio-group";

const options = [
  { value: "react", label: "React" },
  { value: "vue", label: "Vue" },
  { value: "svelte", label: "Svelte" },
];

export default function Example() {
  return (
    <RadioGroup
      label="Framework"
      options={options}
      defaultValue="react"
    />
  );
}

View Code

Instalación

bash

liminal add radio-group

Uso

Pasa options (array de { value, label, disabled? }), opcional label, y defaultValue o value controlado y onValueChange.

Opción AOpción B

<RadioGroup
  options={[
    { value: "a", label: "Opción A" },
    { value: "b", label: "Opción B" },
  ]}
  defaultValue="a"
/>

View Code

Ejemplos

Con etiqueta y opción deshabilitada

Elige unaSíNoQuizás

<RadioGroup
  label="Elige una"
  options={[
    { value: "yes", label: "Sí" },
    { value: "no", label: "No" },
    { value: "maybe", label: "Quizás", disabled: true },
  ]}
  defaultValue="yes"
/>

View Code

API compuesta

Usa RadioGroupRoot, RadioGroupLabel, RadioGroupItem, RadioGroupItemText, RadioGroupItemControl y RadioGroupItemHiddenInput para control total.

tsx

import {
  RadioGroupRoot,
  RadioGroupLabel,
  RadioGroupItem,
  RadioGroupItemText,
  RadioGroupItemControl,
  RadioGroupItemHiddenInput,
} from "@/components/ui/radio-group";

export default function Example() {
  return (
    <RadioGroupRoot defaultValue="react">
      <RadioGroupLabel>Framework</RadioGroupLabel>
      <RadioGroupItem value="react">
        <RadioGroupItemHiddenInput />
        <RadioGroupItemControl />
        <RadioGroupItemText>React</RadioGroupItemText>
      </RadioGroupItem>
      <RadioGroupItem value="vue">
        <RadioGroupItemHiddenInput />
        <RadioGroupItemControl />
        <RadioGroupItemText>Vue</RadioGroupItemText>
      </RadioGroupItem>
    </RadioGroupRoot>
  );
}

API

Prop	Type	Default	Description
options	{ value: string; label: React.ReactNode; disabled?: boolean }[]	-	Opciones del radio (API de conveniencia).
label	React.ReactNode	-	Etiqueta del grupo (API de conveniencia).
defaultValue	string	-	Valor seleccionado inicial.
value	string	-	Valor seleccionado controlado.
onValueChange	(details: { value: string }) => void	-	Callback cuando cambia la selección.