Ir al contenido

Componentes · Ola 1 · Formularios

Switch

Enciende o apaga una opción que tiene efecto inmediato.

import { Switch } from '@archeblack/ui';

Ejemplos

Con label

Cada switch controla algo que cambia en el momento. bind:checked sigue el estado.

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

	let autoDeploy = $state(true);
	let maintenance = $state(false);
</script>

<div style:display="grid" style:gap="var(--arche-spacing-1)">
	<Switch bind:checked={autoDeploy} label="Despliegues automáticos" />
	<Switch bind:checked={maintenance} label="Modo mantenimiento" />
</div>

Con descripción

description explica qué pasa al encenderlo, en text-muted.

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

<Switch
	label="Modo mantenimiento"
	description="Los visitantes ven una página de aviso hasta que lo apagues."
/>

Deshabilitado

disabled apaga el riel y el texto, encendido o no.

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

<div style:display="grid" style:gap="var(--arche-spacing-1)">
	<Switch label="Réplicas en otra región" disabled />
	<Switch label="Cifrado en reposo" checked disabled />
</div>

Sin texto visible

Cuando el contexto ya lo nombra, el nombre accesible va en aria-label.

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

<!-- Sin texto visible (una fila de una lista, por ejemplo): el nombre va en aria-label. -->
<Switch aria-label="Activar Portal de clientes" checked />

Props

PropDescripción
bind:checked? boolean Por defecto falseSi el switch está encendido.
label? string Lo que se enciende o se apaga, 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 lo nombra, aria-labelledby con su id. Hace falta uno de label, children, aria-label o aria-labelledby: TypeScript rechaza un switch sin nombre.
disabled? boolean Por defecto falseDeshabilita el switch. El texto pasa a text-disabled.
class? ClassValue Clases del producto; se suman a arche-switch, el <label> que envuelve al control y su texto.
...rest HTMLInputAttributes Todo lo demás va al <input>: name, value, onchange… El tipo y el rol los fija el componente.

Accesibilidad

  • Es un <input type="checkbox" role="switch"> nativo dibujado con appearance: none: se anuncia como interruptor, encendido o apagado, y responde a la barra espaciadora.
  • El foco es el de Arche y se dibuja sobre el riel.
  • Un <label> envuelve el riel y su texto: toda la fila es clickeable y mide al menos 24 px de alto, también sin texto.
  • El nombre accesible es solo el label; la descripción se anuncia aparte, con aria-describedby, después de la del producto si pasa la suya.
  • Sin texto visible, el nombre va en aria-label o aria-labelledby. Los tipos exigen uno de los cuatro: TypeScript rechaza un switch sin nombre.
  • El borde del riel llega a 3:1 contra todas las superficies (border-control), y el estado no depende solo del color: el pulgar cambia de lado.
  • En colores forzados, el riel encendido se pinta con Highlight y el pulgar con HighlightText.
  • El pulgar se mueve con inset-inline-start: en un documento de derecha a izquierda, encendido queda a la izquierda.

Qué evitar

  • Un switch dentro de un formulario que se confirma con «Guardar». Una Checkbox. El switch es para cambios que se aplican en el momento, sin otro paso.
  • Un label que cambia con el estado («Encendido» / «Apagado»). Un label fijo que nombra lo que se controla; el switch ya dice si está encendido.
  • Un switch para elegir entre dos opciones que no son «sí» y «no» (mensual o anual). Un RadioGroup con las dos opciones escritas.
  • Un cambio lento o que puede fallar sin aviso. Si la acción tarda, deshabilita el switch mientras se aplica y muestra el resultado; si falla, vuelve al estado anterior y avisa.