Saltar al contenido
Fieldbook
Menú
Iniciar sesión
ES

Campos de entrada

Team size stepper

Team size stepper: Un paso a paso para elegir el tamaño de un equipo donde cada paso revela o esconde un avatar en una pila superpuesta encima del conteo.

Cómo usar Team size stepper

Team size stepper se presenta con el formato de vista previa «tarjeta» 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
countnumber1De 1 a 6; paso 1
labeltextTeam SizeHasta 30 caracteres
avatarCountnumber4De 2 a 6; paso 1
¿Para qué frameworks está disponible Team size stepper?

Team size stepper 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 Team size stepper?

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

¿Qué detalles de accesibilidad se observan en Team size stepper?

El código React de Team size stepper incluye: elementos nativos (button); atributos y manejadores (aria-disabled, aria-hidden, aria-label); roles explícitos (group). 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 Team size stepper el movimiento reducido?

Team size stepper consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Expresiones de index.tsx que dependen de la preferencia: avatarSpring: reduce ? { duration: 0.01 } : { type: "spring", stiffness: 430, damping: 26 }; numTween: reduce ? { duration: 0.01 } : { duration: 0.19, ease: "easeOut" }. 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 Character budget counter de Fieldbook, de la categoría Campos de entrada.
2760Character budget counterCampos de entradaUn cuadro de redacción con una lectura de caracteres restantes que golpea un resorte y se calienta en color a medida que se agota el presupuesto.
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.
Imagen fija del componente Appointment Range Card de Fieldbook, de la categoría Campos de entrada.
2108Appointment Range CardCampos de entradaUna tarjeta que combina una cuadrícula de fecha de un solo mes con un campo de hora de inicio y hora de finalización debajo, para seleccionar un día más una ventana de tiempo en un bloque compacto.
Imagen fija del componente Auto Grow Textarea de Fieldbook, de la categoría Campos de entrada.
2792Auto Grow TextareaCampos de entradaUn campo de texto de varias líneas que crece a medida que la persona escribe más, en lugar de desplazarse dentro de un cuadro fijo.
Imagen fija del componente Birthdate popover picker de Fieldbook, de la categoría Campos de entrada.
2305Birthdate popover pickerCampos de entradaUn botón etiquetado que abre un calendario flotante con menús desplegables de meses y años para llegar rápidamente a un año de nacimiento, cerrándose en el momento en que se elige un día.
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.