Ir al contenido

Componentes · Ola 1 · Formularios

Radio

Elige una sola opción de un grupo, con RadioGroup y sus Radio.

import { Radio, RadioGroup } from '@archeblack/ui';

Ejemplos

Grupo

RadioGroup pone el legend y el nombre común; cada Radio es una opción. bind:value sigue la elegida.

Visibilidad
Svelte 
<script lang="ts">
	import { Radio, RadioGroup } from '@archeblack/ui';

	let visibility = $state('private');
</script>

<RadioGroup legend="Visibilidad" bind:value={visibility}>
	<Radio value="private" label="Privado" />
	<Radio value="team" label="Solo el equipo" />
	<Radio value="public" label="Público" />
</RadioGroup>

Con descripción

El grupo y cada opción aceptan description, en text-muted.

Plan

Puedes cambiarlo en cualquier momento.

Svelte 
<script lang="ts">
	import { Radio, RadioGroup } from '@archeblack/ui';

	let plan = $state('studio');
</script>

<RadioGroup
	legend="Plan"
	description="Puedes cambiarlo en cualquier momento."
	name="plan"
	bind:value={plan}
>
	<Radio value="free" label="Gratis" description="Un proyecto y 1.000 visitas al mes." />
	<Radio value="studio" label="Estudio" description="Diez proyectos y dominio propio." />
	<Radio value="team" label="Equipo" description="Proyectos ilimitados y roles por miembro." />
</RadioGroup>

En fila

orientation='horizontal' para pocas opciones cortas.

Frecuencia del resumen
Svelte 
<script lang="ts">
	import { Radio, RadioGroup } from '@archeblack/ui';

	let frequency = $state('weekly');
</script>

<!-- En fila, para pocas opciones cortas. Se parte en varias líneas si no entra. -->
<RadioGroup legend="Frecuencia del resumen" orientation="horizontal" bind:value={frequency}>
	<Radio value="daily" label="Diaria" />
	<Radio value="weekly" label="Semanal" />
	<Radio value="monthly" label="Mensual" />
</RadioGroup>

Deshabilitado

disabled en un Radio apaga esa opción; en el RadioGroup, todas.

Región
Réplicas
Svelte 
<script lang="ts">
	import { Radio, RadioGroup } from '@archeblack/ui';
</script>

<!-- Una opción deshabilitada, y un grupo entero con el disabled del fieldset. -->
<RadioGroup legend="Región" value="south-america">
	<Radio value="south-america" label="Sudamérica" />
	<Radio value="us-east" label="EE. UU. Este" />
	<Radio value="europe" label="Europa" description="Disponible en el plan Equipo." disabled />
</RadioGroup>

<RadioGroup legend="Réplicas" value="one" disabled>
	<Radio value="one" label="Una" />
	<Radio value="three" label="Tres" />
</RadioGroup>

Props

RadioGroup

PropDescripción
legend string El <legend> del grupo: la pregunta que responden las opciones. Es su nombre.
bind:value? string El valor de la opción marcada; undefined si ninguna. Con un bind:value de función el producto puede rechazar el cambio: el grupo vuelve a marcar la opción del estado.
onValueChange? (value: string) => void Se llama cuando la persona marca otra opción, con el valor nuevo, después de actualizar value. Si un bind:value de función rechaza el cambio, no se llama.
description? string Texto de ayuda debajo del legend. Se asocia al grupo con aria-describedby, después del aria-describedby propio si lo hay.
orientation? 'vertical' | 'horizontal' Por defecto 'vertical'Las opciones una debajo de otra, o en una fila que se parte si no entra. Va en data-orientation.
name? string Nombre de los inputs, para enviar el formulario. Sin name, el grupo genera uno único.
disabled? boolean Por defecto falseDeshabilita todas las opciones, con el disabled nativo del <fieldset>.
required? boolean Por defecto falseExige elegir una opción antes de enviar: pone required en cada input.
children? Snippet Las opciones: componentes Radio.
class? ClassValue Clases del producto; se suman a arche-radio-group, en el <fieldset>.
...rest HTMLFieldsetAttributes Cualquier otro atributo va al <fieldset>.

Radio

PropDescripción
value string Valor de la opción. El grupo la marca cuando su value coincide.
label? string Texto de la opción y su nombre accesible.
description? string Texto de ayuda debajo del label, en text-muted. Se asocia al input con aria-describedby.
children? Snippet Contenido del label cuando hace falta marcado. Tiene prioridad sobre label.
aria-label? string Nombre accesible cuando no hay texto visible. Si otro texto de la página ya la nombra, aria-labelledby con su id. Hace falta uno de label, children, aria-label o aria-labelledby: TypeScript rechaza una opción sin nombre.
disabled? boolean Por defecto falseDeshabilita solo esta opción.
class? ClassValue Clases del producto; se suman a arche-radio, el <label> que envuelve al control y su texto.
...rest HTMLInputAttributes Todo lo demás va al <input>: aria-*, onchange… Dentro de un grupo, name, checked y required los decide el grupo.

Accesibilidad

  • RadioGroup es un <fieldset> con su <legend>: los lectores de pantalla anuncian la pregunta al entrar al grupo.
  • Cada opción es un <input type="radio"> nativo dibujado con appearance: none, y todas comparten un name. El grupo es una sola parada del tabulador y las flechas mueven la selección, como en cualquier grupo nativo.
  • El foco es el de Arche y se dibuja sobre el propio círculo.
  • Un <label> envuelve el círculo y su texto: toda la fila es clickeable y mide al menos 24 × 24 px.
  • El nombre accesible de cada opción es solo su label; la descripción se anuncia aparte, con aria-describedby. Sin texto visible, el nombre va en aria-label o aria-labelledby: TypeScript rechaza una opción sin nombre.
  • El borde del círculo llega a 3:1 contra todas las superficies (border-control).
  • En colores forzados, la opción marcada se pinta con Highlight (borde y punto): el estado no depende de un fondo que el navegador reemplaza.

Qué evitar

  • Un grupo sin opción marcada cuando una de ellas es la habitual. Empieza con la opción por defecto marcada (value); así nadie queda sin elegir.
  • Radios para opciones que se pueden combinar. Checkbox, una por opción.
  • Más de cinco o seis opciones en un grupo. Un Select, que ocupa una línea y se recorre igual con el teclado.
  • orientation="horizontal" con labels largos o con descripciones. Vertical: se lee de arriba abajo y cada opción tiene su línea.
  • Un Radio suelto, fuera de un grupo. Siempre dentro de RadioGroup, que les da el nombre común, el legend y bind:value.