RadioGroup

Grupo de opciones excluyentes con etiqueta y apoyo por opción.

Cuándo usarlo

Props. options [{value, label, hint?}], value / defaultValue, onChange(value), size, aria-label. Hasta cinco opciones; más, Select.

Teclado. Tab entra en el grupo por la opción elegida y las flechas cambian de opción.

Ejemplos

DiarioMensualResumen el día 1.Nunca

Props

Prop	Tipo	Por defecto	Descripción
`options`obligatoria	`RadioGroupOption[]`	—	Hasta cinco opciones; con más, `Select`.
`value`	`string`	—
`defaultValue`	`string`	—
`onChange`	`((value: string) => void)`	—
`size`	`"sm" · "md"`	`sm`	Círculos de 16px (`sm`) o 20px (`md`).
`name`	`string`	—	Nombre del campo al enviar el formulario.
`aria-label`	`string`	—	Qué se elige, si no hay una etiqueta visible.
`className`	`string`	—

Código

import { RadioGroup } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<RadioGroup
				aria-label="Plan"
				defaultValue="mensual"
				options={[
					{ value: "mensual", label: "Mensual" },
					{ value: "anual", label: "Anual", hint: "Dos meses gratis" },
				]}
			/>
		</>
	);
}

---
import { RadioGroup } from "@jotis-me/react";
---

<RadioGroup client:load
	aria-label="Plan"
	defaultValue="mensual"
	options={[
		{ value: "mensual", label: "Mensual" },
		{ value: "anual", label: "Anual", hint: "Dos meses gratis" },
	]}
/>

onChange es una función y no cruza de Astro a una isla: envuélvelo en un .tsx y úsalo con client:load.