Todos los componentes (204)

Interruptor

Elección · Switch · .amset-switch

Qué es y cuándo usarlo

Un interruptor de encendido y apagado para un ajuste que se aplica en el momento, sin botón de Guardar.

Cuándo usarlo

Ajustes que surten efecto en cuanto se tocan: «Enviar la factura por email», «Avisarme cuando vuelva a haber existencias».
Cuando lo que se decide es encender o apagar algo, no contestar a una pregunta.
loading mientras el servidor confirma el cambio: no cambia de valor ni se puede volver a pulsar, pero sigue enfocable y el mando lleva un girador.

Cuándo no

Si el cambio necesita un Guardar (un formulario, unas condiciones que se aceptan): Checkbox.
Elegir entre dos opciones con nombre propio (mensual o anual, lista o rejilla): SegmentedGroup.

Teclado: es una casilla nativa con papel de interruptor: Tab llega a ella y Espacio la enciende y la apaga. Con disabled sale del orden del Tab.

Accesibilidad: se anuncia como switch, con su estado encendido o apagado. El nombre es el texto, que es obligatorio; la description se lee después, como descripción. La vía y el mando son decorativos. En un idioma de derecha a izquierda el mando va hacia la izquierda sin tocar nada.

Tamaños: vía de 28, 34 o 44 px de ancho, centrada en la primera línea del texto. Con el dedo, la fila llega a 44 px.

Estados: hover, pulsado (el mando se estira hacia donde va), foco de teclado, encendido (el mando cruza la vía), solo lectura (vía discontinua, sin acento) y deshabilitado.

Aspecto fino: variables --amset-switch-width, -height, -knob, -stretch, -font, -description, -track, -track-active y -color-knob.

Cómo se ve

Avisos por correoModo oscuro

<Switch defaultSelected>Avisos por correo</Switch>
<Switch description="Se aplica al entrar">Modo oscuro</Switch>

Props

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

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	El nombre del ajuste: es lo que oye el lector de pantalla.
`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-label`	`string`	Defines a string value that labels the current element.
`aria-labelledby`	`string`	Identifies the element (or elements) that labels the current element.
`autoFocus`	`boolean`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`defaultSelected`	`boolean`	Encendido al empezar, gobernandose por dentro.
`description`	`string`	Lo que hace el ajuste, bajo el nombre. Se lee como descripcion, no como parte del nombre.
`disabled`	`boolean`	—
`excludeFromTabOrder`	`boolean`	Lo saca del recorrido del tabulador sin quitarle el foco por programa.
`form`	`string`	El `id` del `<form>` al que pertenece, si no lo envuelve.
`id`	`string`	Va al `<input>`, que es el nodo enfocable: `WeeklySchedule` lo busca con `getElementById` para llevarle el foco, y en el `<label>` no serviria.
`inputRef`	`Ref<HTMLInputElement>`	Para llegar al `<input>` de verdad.
`loading`	`boolean`	Esperando a que quien lo monta confirme el cambio (una peticion al servidor). Mientras dura NO cambia de valor y no avisa, pero sigue en el orden del tabulador -no se pierde el foco- y lleva un girador en el tirador. Es lo que evita que se pueda volver a pulsar sin saber que el primer clic aun no ha llegado.
`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 pulsarlo, diciendo con que se ha pulsado.
`readOnly`	`boolean`	Se lee y se enfoca, pero no cambia.
`selected`	`boolean`	Encendido, gobernado desde fuera.
`size`	`"sm" \| "md" \| "lg"`	Tamaño de la via y del texto: 28, 34 o 44 px de ancho. Con el dedo, la fila llega a 44 px.
`value`	`string`	El valor con el que viaja en el formulario cuando esta encendido.

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-switch-width`	`2.125rem`
`--amset-switch-height`	`1.25rem`
`--amset-switch-knob`	`1rem`
`--amset-switch-stretch`	`0.25rem`
`--amset-switch-font`	`var(--amset-text-base)`
`--amset-switch-description`	`var(--amset-text-sm)`
`--amset-switch-track`	`var(--amset-border-bold)`
`--amset-switch-track-active`	`var(--amset-accent)`
`--amset-switch-color-knob`	`var(--amset-surface)`
`--amset-switch-slot`	`calc((var(--amset-switch-height) - var(--amset-switch-knob)) / 2)`
`--amset-switch-line`	`calc(var(--amset-switch-font) * var(--amset-line-tight))`
`--amset-switch-extra`	`0px`
`--amset-switch-target`	`1.5rem`

Cómo se cambia

.amset-switch {
  --amset-switch-width: ...;
  --amset-switch-height: ...;
}

En el banco de pruebas

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