Radio group

2 a 5 opciones excluyentes que conviene ver todas juntas.

Opciones excluyentes nativas. El dashboard usa ChoiceCard para el nivel de moderación y el estilo del pulso, con label completo clickeable, borde y anillo de selección.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/radio-group.json

import

import { RadioGroup, RadioItem, ChoiceCard } from "@moodinary/ui/components/radio-group";

Ejemplos

Nivel de moderación

Replica ModerationFieldset con sus tres niveles y descripciones. Todas las tarjetas comparten name; elegir una desmarca la anterior.

Nivel de moderación*

Qué tan estricto es el filtro automático sobre comentarios.

PermisivoSolo bloquea amenazas explícitas y odio extremo.CautelosoFiltra toxicidad evidente pero permite quejas y frustraciones.EstrictoCero tolerancia a palabras malsonantes y negatividad agresiva.

Código

default.tsx

import { FieldHint, FieldLegend } from "@moodinary/ui/components/field";
import { ChoiceCard } from "@moodinary/ui/components/radio-group";

export default function RadioGroupDefault() {
	return (
		<fieldset className="w-full min-w-0 max-w-xl space-y-2">
			<FieldLegend required>Nivel de moderación</FieldLegend>
			<FieldHint>
				Qué tan estricto es el filtro automático sobre comentarios.
			</FieldHint>
			<div className="grid gap-2">
				<ChoiceCard
					defaultChecked
					description="Solo bloquea amenazas explícitas y odio extremo."
					name="moderation-level"
					title="Permisivo"
					value={1}
				/>
				<ChoiceCard
					description="Filtra toxicidad evidente pero permite quejas y frustraciones."
					name="moderation-level"
					title="Cauteloso"
					value={2}
				/>
				<ChoiceCard
					description="Cero tolerancia a palabras malsonantes y negatividad agresiva."
					name="moderation-level"
					title="Estricto"
					value={3}
				/>
			</div>
		</fieldset>
	);
}

Props

RadioGroup

Prop	Tipo	Default	Descripción
aria-label / aria-labelledby	string	-	Nombre accesible de la pregunta.
...props	React.ComponentProps<"div">	-	Atributos del contenedor con role radiogroup.

RadioItem

Prop	Tipo	Default	Descripción
label	React.ReactNode	-	Texto visible de la opción, obligatorio.
name	string	-	Compartido por las opciones del mismo grupo.
value	string \| number \| readonly string[]	-	Valor enviado cuando la opción está elegida.
checked / defaultChecked	boolean	-	Estado controlado o inicial de esta opción.
onChange	React.ChangeEventHandler<HTMLInputElement>	-	Se dispara al seleccionar una opción.
disabled	boolean	false	Impide elegir esta opción.

ChoiceCard

Prop	Tipo	Default	Descripción
title	React.ReactNode	-	Nombre de la opción en tarjeta.
description	React.ReactNode	-	Explica qué cambia al elegirla.
badge / preview	React.ReactNode	-	Etiqueta o muestra visual opcional.
...props	Omit<React.ComponentProps<"input">, "type" \| "title">	-	Atributos nativos del radio, como name, value y disabled.

Cuándo sí y cuándo no

Hacé

Usá el mismo name para todas las opciones.
Elegí nombres que contrasten claramente.
Usá ChoiceCard cuando cada opción necesita una explicación.

Evitá

No permitas varias opciones con radios.
No uses un grupo enorme: preferí Select.
No dejes el grupo sin una pregunta visible.

Tab entra al grupo y las flechas cambian de radio; Espacio selecciona.
Los radios nativos resuelven la navegación cuando comparten name.
Usá aria-labelledby para enlazar la pregunta visible al grupo.