Todos los componentes (204)

Grupo de opciones

Elección · RadioGroup

Qué es y cuándo usarlo

Un grupo de opciones que se excluyen: se elige una y solo una, con todas a la vista. Cada opción es una RadioOption dentro del RadioGroup; fuera de él no tiene sentido.

Cuándo usarlo

De dos a cinco opciones que conviene ver a la vez antes de elegir: la forma de pago, el tipo de cliente, el método de envío.
En un formulario que se envía con un botón (con name, el valor viaja en él). orientation="vertical" cuando los textos son largos o hay más de tres.

Cuándo no

Muchas opciones, o una lista que no hace falta ver entera: Select.
Algo que se aplica en el momento (la vista de una tabla, el periodo de un informe): SegmentedGroup.
Elegir varias: Checkbox, o FilterGroup en las facetas de un catálogo.

Teclado: cada opción es un radio nativo del mismo grupo, así que el recorrido es el del navegador: un solo Tab para entrar y salir del grupo, y las flechas (las cuatro) mueven la selección y eligen a la vez; al llegar al final dan la vuelta. Las opciones deshabilitadas se saltan.

Accesibilidad: es un radiogroup que se llama como su label. La etiqueta, la ayuda (hint) y el error (error) son las de los campos (con asterisco si es obligatorio); la ayuda y el error se leen como descripción del grupo, y el error lo marca como no válido. El punto de cada opción es decorativo: el nombre es su texto, y la description de una opción se lee después de él.

Tamaños: size es del grupo entero: punto de 14, 16 o 20 px, con su letra, y la etiqueta, la ayuda y el error de ese tamaño de campo. Con el dedo, cada opción llega a 44 px.

Estados: hover, pulsada, foco de teclado, elegida (el punto de dentro crece), no válida, solo lectura (borde discontinuo y punto en tinta) y deshabilitada.

Aspecto fino: variables --amset-radius-group-dot, -brand (el punto de dentro), -font, -description, -border, -background, -checked y -target (lo mínimo que mide cada opción). No son --amset-radius-*: esas son las de las esquinas.

Cómo se ve

Método de envío

A domicilioRecogida en la tiendaOficina de Correos

Los envíos a domicilio salen el mismo día si pides antes de las 14:00

Forma de pago

TarjetaBizumTransferencia

<RadioGroup label="Metodo de envio" orientation="vertical" defaultValue="domicilio">
  <RadioOption value="domicilio" description="En 24-48 horas · 4,95 EUR">A domicilio</RadioOption>
  <RadioOption value="tienda" description="Calle Colon 14, Valencia · gratis">Recogida en la tienda</RadioOption>
  <RadioOption value="correos" description="La oficina que elijas · 2,95 EUR">Oficina de Correos</RadioOption>
</RadioGroup>

Props

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

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`label`obligatoria	`string`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`defaultValue`	`string`	La opcion elegida al empezar, gobernandose por dentro.
`disabled`	`boolean`	—
`error`	`string`	—
`hint`	`string`	—
`invalid`	`boolean`	—
`name`	`string`	El nombre con el que viaja en el formulario.
`onBlur`	`(event: FocusEvent<HTMLDivElement>) => void`	—
`onChange`	`(value: string) => void`	—
`orientation`	`RadioOrientation`	—
`readOnly`	`boolean`	Se lee y se enfoca, pero no cambia.
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	Tamaño de todas las opciones del grupo (punto de 14, 16 o 20 px y su texto) y de la etiqueta, la ayuda y el error, como en un campo.
`value`	`string \| null`	La opcion elegida, gobernada desde fuera. `null` es «ninguna».

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

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