Campos de entrada

Labeled toggle row

Labeled toggle row: Un 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.

Cómo usar Labeled toggle row

Labeled toggle row 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
`label`	`text`	`Airplane mode`	Hasta 30 caracteres
`checked`	`boolean`	`false`	Los metadatos no indican otro límite.
`accent`	`color`	`#7C5CFF`	Los metadatos no indican otro límite.
`size`	`select`	`default`	Opciones: default, sm

¿Para qué frameworks está disponible Labeled toggle row?

Labeled toggle row 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 Labeled toggle row?

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

¿Qué detalles de accesibilidad se observan en Labeled toggle row?

El código React de Labeled toggle row incluye: elementos nativos (button); atributos y manejadores (aria-checked, aria-hidden); roles explícitos (switch). 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 Labeled toggle row el movimiento reducido?

El análisis no encontró una consulta directa con useReducedMotion() o matchMedia en el archivo index.tsx de Labeled toggle row. 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

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 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 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 Addon Input Group de Fieldbook, de la categoría Campos de entrada.

2297Addon Input GroupCampos de entradaUn campo de texto envuelto en un caparazón con borde que puede contener un ícono inicial, un botón final o texto, y comparte un anillo de enfoque en todo el grupo.