Saltar al contenido
Fieldbook
Menú
Iniciar sesión
ES

Campos de entrada

Check draw toggle

Check draw toggle: Una 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.

Cómo usar Check draw toggle

Check draw 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.

ControlTipoValor inicialLímites de la vista previa
checkedbooleanfalseLos metadatos no indican otro límite.
sizeselectmediumOpciones: small, medium, large
variantselectoutlineOpciones: outline, filled
accentColorcolor#38BDF8Los metadatos no indican otro límite.
¿Para qué frameworks está disponible Check draw toggle?

Check draw 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 Check draw toggle?

Los metadatos de React indican estas dependencias npm además de React: motion, clsx, tailwind-merge.

¿Qué detalles de accesibilidad se observan en Check draw toggle?

El código React de Check draw toggle incluye: atributos y manejadores (aria-checked, aria-disabled, aria-hidden); roles explícitos (checkbox). 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 Check draw toggle el movimiento reducido?

Check draw toggle consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Expresiones de index.tsx que dependen de la preferencia: delay: reduceMotion ? 0 : 0.1; delay: reduceMotion ? 0 : filled ? 0 : 0.1; duration: reduceMotion ? 0 : 0.06. 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 Latching square toggle de Fieldbook, de la categoría Campos de entrada.
2808Latching square toggleCampos de entradaUn 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.
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 Icon crossfade switch de Fieldbook, de la categoría Campos de entrada.
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 Select All Checklist de Fieldbook, de la categoría Campos de entrada.
1982Select All ChecklistCampos de entradaUna casilla de verificación principal que muestra un guión cuando solo algunos de sus elementos secundarios están marcados y una marca de verificación una vez que todos los elementos lo están.
Imagen fija del componente Multi select toggle row de Fieldbook, de la categoría Campos de entrada.
2002Multi select toggle rowCampos de entradaUna fila de botones de alternancia independientes, como opciones de formato de texto, donde cualquier número puede permanecer presionado a la vez.
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.