Switch

Switch enciende o apaga una preferencia con efecto inmediato, como recordatorios o notificaciones. Se usa dentro de un ControlField con una etiqueta que describe el estado encendido.

Toyota Yaris · JTRX-12

Recordatorios

Anatomía

Un riel con una perilla que se desliza al encender. La etiqueta vive en el ControlField y describe qué pasa cuando está encendido.

  1. Riel
  2. Perilla
  3. Etiqueta

Variantes

El Switch tiene un solo estilo. Lo que cambia es el ControlField que lo envuelve: inline, spread o agrupado en un ControlGroup.

InlineSwitch y etiqueta juntos, para un ajuste suelto.
SpreadLa etiqueta a la izquierda y el switch al borde derecho.
ControlGroupPantallas de ajustes con varias preferencias.

Tamaños

smListas de ajustes densas.
defaultEl tamaño estándar para formularios y checkout.

Estados

ApagadoEl ajuste está inactivo.
EncendidoEl ajuste está activo y ya tiene efecto.
DeshabilitadoNo se puede cambiar en este contexto.

Uso

Sí
Ajustes que se aplican al instante, sin un botón de guardar.
No
Confirmaciones dentro de un formulario. Para eso usa Checkbox.
Sí
Una etiqueta que describe el estado encendido.
No
Etiquetas en negativo que obligan a pensar dos veces.

Código

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

<ControlField label='Necesito factura' layout='spread'>
  <Switch checked={invoice} onCheckedChange={setInvoice} />
</ControlField>