Checkbox

Checkbox permite marcar opciones que se suman entre sí, como servicios adicionales o la aceptación de términos. Siempre va dentro de un ControlField con su etiqueta.

Toyota Yaris · JTRX-12

Agrega a tu mantención

Anatomía

Checkbox es solo la casilla. Siempre va dentro de un ControlField, que suma la etiqueta y hace que toda la fila sea tocable.

  1. Casilla
  2. Etiqueta
  3. Descripción opcional

Variantes

La variante la define el ControlField: inline para pocas opciones sueltas, spread dentro de un ControlGroup para listas.

InlineCasilla y etiqueta juntas. Para confirmaciones cortas.
Con descripciónCuando la opción necesita una línea de contexto.
ControlGroupLista de opciones con la casilla al final de cada fila.

Tamaños

smListas densas y filtros compactos.
defaultEl tamaño estándar para formularios y checkout.

Estados

Sin marcarEstado inicial, aún sin selección.
MarcadoLa opción quedó seleccionada.
DeshabilitadoLa opción no está disponible para este auto.

Uso

Sí
Opciones independientes que se pueden sumar, como servicios adicionales.
No
Opciones excluyentes. Si solo se puede elegir una, usa RadioGroup.
Sí
Una etiqueta clara dentro de ControlField, así toda la fila es tocable.

Acepto los términos

No
Una casilla suelta, con el texto fuera del área tocable.

Código

import { Checkbox } from '@carvuk/design-system/components/checkbox';
import { ControlField } from '@carvuk/design-system/components/control-field';

<ControlField label='Lavado exterior' description='Lo hacemos al terminar la mantención.'>
  <Checkbox defaultChecked />
</ControlField>