Todos los componentes (204)

Tarjeta de opción

Elección · OptionCard

Qué es y cuándo usarlo

Una opción de RadioGroup pintada como tarjeta: para elegir UNA entre varias cuando cada una necesita enseñarse (un tema, un motor de voz, un plan), no solo nombrarse. Por dentro sigue siendo un radio nativo, así que el teclado es el del grupo.

Cuándo usarlo

Pocas opciones excluyentes (de dos a seis) en las que una muestra, un icono o una descripción ayudan a decidir.
media para la zona de arriba (una muestra de color, una miniatura, un icono) y description para la frase de debajo.
Dentro de un RadioGroup, las tarjetas se reparten en una rejilla que se adapta al ancho.

Cuándo no

Opciones que se explican con una palabra: RadioOption, en fila o en columna.
Una elección entre pocas que cabe en una barra: SegmentedGroup.
Elegir varias a la vez: ToggleChip o Checkbox.
Muchas opciones: Select.

Teclado: el Tab entra en el grupo una sola vez, en la tarjeta elegida (o en la primera si no hay ninguna). Las flechas cambian de tarjeta y dan la vuelta al llegar al final; una tarjeta apagada se salta. No hace falta pulsar Intro: elegir es moverse.

Accesibilidad: cada tarjeta es un <input type="radio"> con su título como nombre y la descripción como descripción (no forma parte del nombre). La muestra es decorativa (aria-hidden). La elegida se ve por la forma —borde grueso y una marca de verificación— y no solo por el color.

Aspecto fino: variables CSS --amset-option-card-*: -min (ancho mínimo de cada tarjeta en la rejilla, por defecto 9rem), -padding, -gap, -radius, -border, -background, -selected (el color de la elegida) y -media (alto mínimo de la zona de arriba).

Cómo se ve

Tema

ClaroOscuroComo el sistema

Se aplica en todos tus dispositivos.

<RadioGroup label="Tema" defaultValue="oscuro">
  <OptionCard value="claro" description="Fondo blanco, para trabajar de día">Claro</OptionCard>
  <OptionCard value="oscuro" description="Menos luz de noche">Oscuro</OptionCard>
</RadioGroup>

Props

Se importa con import { OptionCard } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	El titulo de la tarjeta: es su nombre para el lector de pantalla.
`value`obligatoria	`string`	La clave de la opcion: lo que llega a `onChange` del grupo y viaja en el formulario.
`aria-describedby`	`string`	—
`aria-label`	`string`	—
`className`	`string`	Clases CSS propias para la tarjeta.
`description`	`string`	Texto secundario bajo el titulo. Se lee como descripcion, no como parte del nombre.
`disabled`	`boolean`	—
`media`	`ReactNode`	Lo que va encima del titulo y no es texto: una muestra de color, un icono, una miniatura. Es decorativo (`aria-hidden`): el nombre lo pone el titulo.
`onPress`	`(event: ChoicePressEvent) => void`	Se avisa al pulsarla, diciendo con que se ha pulsado.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: