Campos de entrada

Latching square toggle

Latching square toggle: Un botón de icono cuadrado compacto que se engancha entre un estado apagado con un contorno tenue y un estado presionado lleno de acento sólido.

Tap to keep this release

Each square latches on its own, in three sizes

Cómo usar Latching square toggle

Latching square toggle se presenta con el formato de vista previa «en línea» y el tema «claro/oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

Control	Tipo	Valor inicial	Límites de la vista previa
`pressed`	`boolean`	`false`	Los metadatos no indican otro límite.
`size`	`select`	`md`	Opciones: sm, md, lg
`disabled`	`boolean`	`false`	Los metadatos no indican otro límite.
`accentColor`	`color`	`#9BE15D`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Latching square toggle?

Latching square toggle está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Latching square toggle?

Los metadatos de React indican estas dependencias npm además de React: clsx.

¿Qué detalles de accesibilidad se observan en Latching square toggle?

El código React de Latching square toggle incluye: elementos nativos (button); atributos y manejadores (aria-hidden, aria-pressed). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Latching square toggle el movimiento reducido?

El análisis no encontró una consulta directa con useReducedMotion() o matchMedia en el archivo index.tsx de Latching square toggle. Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Settings Toggle Row de Fieldbook, de la categoría Campos de entrada.

2017Settings Toggle RowCampos de entradaUna fila de configuraciones etiquetadas que termina en un interruptor de encendido y apagado cuyo pulgar se estira al presionarlo y regresa cuando se asienta.

Imagen fija del componente Check draw toggle de Fieldbook, de la categoría Campos de entrada.

1932Check draw toggleCampos de entradaUna casilla de verificación cuadrada cuya marca de verificación se dibuja trazo a trazo cuando está marcada, con una presión suave y una escala de desplazamiento.

1980Icon crossfade switchCampos de entradaUn interruptor de palanca cuyo ícono del pulgar se desvanece y se escala hasta convertirse en un ícono diferente a medida que el interruptor cambia entre encendido y apagado.

Imagen fija del componente Sliding Thumb Switch de Fieldbook, de la categoría Campos de entrada.

2433Sliding Thumb SwitchCampos de entradaUn interruptor de encendido/apagado construido a partir de una casilla de verificación oculta: una pastilla que cambia de color y un pulgar redondo que se desliza hacia el borde opuesto.

Imagen fija del componente Spring layout toggle de Fieldbook, de la categoría Campos de entrada.

2781Spring layout toggleCampos de entradaUn interruptor cuya perilla está alineada con un extremo de la pista solo por diseño y salta entre las dos posiciones medidas cada vez que cambia el estado.

Imagen fija del componente Labeled toggle row de Fieldbook, de la categoría Campos de entrada.

2798Labeled toggle rowCampos de entradaUn pequeño interruptor de encendido/apagado emparejado en línea con su propia etiqueta de texto, del tamaño de una fila de la lista de configuraciones.