Todos los componentes (204)

Casilla

Elección · Checkbox · .amset-checkbox

Qué es y cuándo usarlo

Una casilla de verificación: sí o no sobre una cosa, o marcar varias de una lista. Se pulsa en toda la etiqueta, no solo en el cuadrado.

Cuándo usarlo

Aceptar algo que se envía con un botón: «Acepto las condiciones de venta». El cambio vale al pulsar Enviar, no antes.
Marcar varias opciones de una lista corta. Con indeterminate, la casilla de «Seleccionar todo» cuando solo hay algunas marcadas.
En una fila de tabla, sin texto al lado: el nombre va entonces en aria-label. Los tipos no dejan montar una casilla muda.

Cuándo no

Un ajuste que se aplica en el momento, sin Guardar: Switch.
Una opción entre varias que se excluyen: RadioGroup, o SegmentedGroup si el cambio se ve al instante.
Las facetas de un catálogo, con contador y «Ver las N restantes»: FilterGroup.

Teclado: Tab llega a ella; Espacio la marca y la desmarca. Deshabilitada sale del orden del Tab.

Accesibilidad: es un <input type="checkbox"> de verdad, escondido bajo el cuadrado que se ve, y su nombre es el texto. Con name y value viaja en un formulario nativo. La description se lee como descripción, después del nombre: no forma parte de él. El estado indeterminado se anuncia como «parcialmente marcada», no solo con el guion. La marca y el guion del cuadrado son decorativos.

Tamaños: caja de 14, 16 o 20 px, centrada en la primera línea del texto. Con el dedo, la fila llega a 44 px; sola (en una tabla), el área que se pulsa crece por fuera hasta 24 px con ratón y 44 con el dedo, sin mover nada.

Estados: hover, pulsada (la caja cede un poco), foco de teclado, marcada o a medias (el visto entra creciendo), no válida, solo lectura (borde discontinuo y sin relleno de acento) y deshabilitada.

Aspecto fino: variables --amset-checkbox-box, -radius, -font, -description, -border, -background, -checked (el relleno al marcarla) y -brand (el color del visto).

Cómo se ve

Acepto las condicionesAvisos por correo

<Checkbox defaultSelected>Acepto las condiciones</Checkbox>
<Checkbox description="Puedes darte de baja cuando quieras">Avisos por correo</Checkbox>

Props

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

Prop	Tipo	Para qué sirve
`aria-controls`	`string`	Identifies the element (or elements) whose contents or presence are controlled by the current element.
`aria-describedby`	`string`	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	Identifies the element that provides a detailed, extended description for the object.
`aria-labelledby`	`string`	Identifies the element (or elements) that labels the current element.
`autoFocus`	`boolean`	—
`children`	`ReactNode`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`defaultSelected`	`boolean`	Marcada al empezar, gobernandose por dentro.
`description`	`string`	Texto secundario bajo la etiqueta. El lector de pantalla lo lee como descripcion, despues del nombre: no forma parte de el. Solo se pinta si la casilla lleva etiqueta visible.
`disabled`	`boolean`	—
`excludeFromTabOrder`	`boolean`	La saca del recorrido del tabulador sin quitarle el foco por programa.
`form`	`string`	El `id` del `<form>` al que pertenece, si no la envuelve.
`id`	`string`	Va al `<input>`, que es el nodo enfocable.
`indeterminate`	`boolean`	La tercera cara: ni marcada ni sin marcar. Es solo presentacion y no cambia al pulsarla; sirve para la casilla que manda sobre una lista a medias.
`inputRef`	`Ref<HTMLInputElement>`	Para llegar al `<input>` de verdad.
`invalid`	`boolean`	—
`name`	`string`	El nombre con el que viaja en el formulario.
`onBlur`	`(event: FocusEvent<HTMLInputElement>) => void`	—
`onChange`	`(selected: boolean) => void`	—
`onChangeEvent`	`(event: ChangeEvent<HTMLInputElement>) => void`	Como `onChange`, pero con el evento nativo del `<input>`: `e.target.checked`... Existe para migrar un front que ya escribe sus manejadores con el evento (AMS-735). Si solo quieres saber si esta marcada, `onChange` lo entrega ya.
`onFocus`	`(event: FocusEvent<HTMLInputElement>) => void`	—
`onPress`	`(event: ChoicePressEvent) => void`	Se avisa al pulsarla, diciendo con que se ha pulsado.
`readOnly`	`boolean`	Se lee y se enfoca, pero no cambia.
`required`	`boolean`	—
`selected`	`boolean`	Marcada, gobernado desde fuera.
`size`	`"sm" \| "md" \| "lg"`	Tamaño de la caja y del texto: caja de 14, 16 o 20 px. Con el dedo, la fila llega a 44 px.
`validationBehavior`	`ValidationBehavior`	Por defecto `native`, como hasta ahora: pone el `required` del navegador.
`value`	`string`	Su clave dentro de un grupo de casillas, y el valor con el que viaja en el formulario cuando esta marcada.

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

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-checkbox-box`	`1rem`
`--amset-checkbox-radius`	`var(--amset-radius-sm)`
`--amset-checkbox-font`	`var(--amset-text-base)`
`--amset-checkbox-description`	`var(--amset-text-sm)`
`--amset-checkbox-border`	`var(--amset-border-bold)`
`--amset-checkbox-background`	`var(--amset-surface)`
`--amset-checkbox-checked`	`var(--amset-accent)`
`--amset-checkbox-brand`	`var(--amset-accent-ink)`
`--amset-checkbox-line`	`calc(var(--amset-checkbox-font) * var(--amset-line-tight))`
`--amset-checkbox-target`	`1.5rem`

Cómo se cambia

.amset-checkbox {
  --amset-checkbox-box: ...;
  --amset-checkbox-radius: ...;
}

En el banco de pruebas

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