El componente selector numérico permite a los usuarios aumentar o disminuir un valor numérico gradualmente. Los usuarios también pueden escribir valores numéricos directamente en el campo de entrada.
Para parámetros numéricos con un valor predeterminado claro que es probable que la mayoría de los usuarios seleccionen.
Para ajustar los campos numéricos en una pequeña cantidad discreta, con menos de 10 incrementos o decrementos. Por ejemplo, puede utilizar el selector numérico para cambiar la cantidad de pasajeros en un vehículo o de copias que se deben realizar.
Si es frecuente o se esperan grandes desviaciones del valor predeterminado.
Para seleccionar un solo valor o un intervalo de valores de entre un conjunto fijo de opciones. En su lugar, utilice el control deslizante.
Para variables continuas, como la edad, la altura, el precio o la distancia. Utilice la entrada de número para especificar el valor exacto dentro de un intervalo amplio.
El selector numérico consta de los siguientes elementos:
Rótulo: Indica qué valor cambia el selector numérico, como la cantidad de pasajeros.
Botón de disminución: Botón que reduce el valor. El valor se reduce de a 1 cuando un usuario hace clic en el botón.
Valor: El valor actual que ha sido seleccionado o predeterminado. Los usuarios tienen la opción de ingresar manualmente un valor numérico haciendo clic en el campo de entrada de texto.
Botón de aumento: Botón que aumenta el valor. El valor aumenta de a 1 cuando un usuario hace clic en el botón.
En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
Coloque un rótulo claro y visible fuera del campo de entrada del selector numérico. El texto del rótulo explica el propósito del selector numérico y proporciona contexto para el usuario. Un campo de entrada sin rótulo es ambiguo e inaccesible.
Note: La propiedad label es obligatoria para el componente Stepper. Si no desea que el rótulo sea visible, puede pasar hideLabel = true por debajo de la propiedad label.
Coloque un rótulo permanente fuera del campo.
No dé por sentado que el campo se entiende por sí solo sin un rótulo.
El texto del mensaje de error indica a un usuario cómo corregir el error. En el caso de selector numérico, los errores a menudo están relacionados con datos que no son válidos o con un campo obligatorio que queda vacío.
En el texto de error, use mayúsculas como se usan en las oraciones. Escriba 1 o 2 oraciones cortas y completas que terminen con un punto.
Use el texto de error para guiar al usuario y mostrarle una solución.
No escriba mensajes de error ambiguos ni deje a los usuarios pensando cómo resolver un problema.
Utilice un asterisco (*) para indicar los campos obligatorios. El asterisco precede al rótulo del campo. Esto ayuda a los usuarios a identificar fácilmente qué campos son obligatorios escaneando solo el carácter más a la izquierda del rótulo.
Además de marcar los campos obligatorios con un asterisco, se recomienda incluir instrucciones claras en la parte superior del formulario, como “Todos los campos marcados con un asterisco son obligatorios”, para garantizar que los usuarios comprendan el significado del asterisco.
Utilice un asterisco para indicar que un campo es obligatorio.
No use un asterisco para indicar algo que sea opcional.
El campo del selector numérico tiene estados para habilitado, deshabilitado, en foco, error, solo lectura y solo visualización.
Los elementos de control del selector numérico utilizan botones de ícono. Para obtener información sobre los estados de los botones de íconos, consulte la documentación sobre estados de los botones.
Estado
Descripción
Habilitado (valor predeterminado)
Comunica al usuario que el elemento está habilitado para la interacción.
Deshabilitado
Indica al usuario que el valor de entrada no se puede cambiar debido a factores locales. Por ejemplo, una casilla de verificación sobre el campo de entrada debe estar marcada para acceder a este campo de entrada. El usuario puede habilitarla interactuando con la página.
En foco
Proporciona retroalimentación que indica que el usuario resaltó el elemento, normalmente mediante un método de entrada como teclado o voz.
Error
Indica que el usuario cometió un error de validación. Un rótulo de validación proporciona información para solucionarlo.
Solo lectura
Indica al usuario que el valor de entrada no se puede cambiar debido a factores externos. Por ejemplo, la falta de acceso de escritura. El usuario puede hacer algo para habilitarlo, por ejemplo, ponerse en contacto con un administrador.
Solo visualización
El estado de solo visualización se utiliza en dos casos:
Un elemento de interfaz de usuario se utiliza en el modo de visualización.
Un elemento de la interfaz de usuario se muestra en el modo de edición, pero nunca se puede editar.
Los usuarios pueden ingresar manualmente un valor numérico haciendo clic en el campo de entrada de texto. También pueden aumentar o disminuir el valor de forma gradual al hacer clic en el ícono de suma o resta.
Cada elemento del componente selector numérico de Jutro está indexado para tabulación y, como tal, se puede acceder a él a través de la tecla Tab. Los valores se pueden aumentar o disminuir con la barra espaciadora o la tecla Intro. El valor dentro del campo de entrada también se puede establecer explícitamente con las teclas de flecha del cursor o ingresándolo manualmente.
Los botones de valor más y menos incluyen un atributo aria-label “Aumentar valor” y “Disminuir valor”, respectivamente. Estos se pueden cambiar en Storybook en los campos messageProps. El campo de entrada utiliza aria-live="polite" para transmitir su valor a las personas ciegas y está asociado con el texto del rótulo del componente a través de aria-labelledby.
Establezca el valor seleccionado con más frecuencia como valor predeterminado del selector numérico. Por ejemplo, para reservar una habitación de hotel, 1 suele ser el número predeterminado de adultos, mientras que 0 puede ser el número predeterminado de niños.
Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:
La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
El elemento se puede operar con teclado, así como con mouse.
Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.
El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.
Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.
If set to true, displays the component value in plain text. Consider using readonly instead, if possible, because plain text is worse for accessibility than readonly inputs.
Value of input. Takes precedence over initialValue. If this prop is passed, component works in controlled mode and its value will change only if this prop changes.
Aunque las propiedades min y max se pueden utilizar para restringir los valores que se pueden establecer en el componente a través de los botones (+) y (-), existen tres formas diferentes en las que el componente selector numérico puede establecer un valor fuera de estos límites:
Propiedades initialValue o value. Estas propiedades pueden aceptar cualquier número y, si el proporcionado está fuera de los límites definidos, se utilizará de todos modos.
Entrada manual del usuario. El usuario puede escribir cualquier número, incluso si está fuera de los límites definidos.
En caso de tener un valor initialValue o un valor ingresado manualmente fuera de los límites, el componente selector numérico:
desactivará el botón (+) si el valor está por encima del valor de la propiedad max;
desactivará el botón (-) si el valor está por debajo del valor de la propiedad min;
establecerá el valor en los valores min o max definidos cuando se hace clic en el botón correspondiente.
Aunque algunos componentes de Jutro pueden proporcionar características complementarias o una función de ayuda para facilitar el proceso de validación, es su responsabilidad, como desarrollador, manejar la validación de cualquier entrada del usuario (con o sin ayudantes complementarios) y decidir qué mensajes de error se mostrarán.
Los componentes de Jutro se comportan en función de la implementación del desarrollador.
¿Cuándo se muestran los mensajes de error?
Los mensajes de error solo se muestran cuando los pasa al componente a través de la propiedad stateMessages. Esta propiedad recibe un objeto con el siguiente contenido:
El componente muestra cada mensaje de error proporcionado en el mismo orden que en la matriz.
¿Cuándo se produce la validación?
Esta decisión es suya, en calidad de desarrollador. Dado que los componentes no determinan cuándo se realiza la validación ni cuándo se debe mostrar el error, debe implementar la lógica para manejarla de acuerdo con los requisitos del proyecto, por ejemplo, mientras el usuario edita el contenido, cuando el componente pierde el foco y en el envío de formularios.
Consulte la sección Uso para obtener detalles sobre cómo diseñar un selector numérico (stepper) correctamente y las diferentes opciones de configuración que ofrecemos.
Puede permitir que el usuario ingrese un número utilizando el componente Stepper. A continuación, utilice el controlador para obtener el número seleccionado.
Stepper no proporciona una lógica de validación específica, pero sí la forma de incluir la validación del desarrollador y usar la propiedad stateMessages para mostrar cualquier mensaje de error necesario.
Este es un ejemplo de manejo de validación cuando se activa un evento onChange. Ingrese un valor por debajo de 0 o por encima de 10 sin usar los botones para probarlo.
exportfunctionStepperValidation(){ const[validationMessages, setValidationMessages]=useState({}); const max =10; const min =0; const onChange =useCallback((e, newValue)=>{ setValidationMessages({}); if(newValue &&(newValue > max || newValue < min)){ setValidationMessages({ error:['Value must be between 0 and 10'], }); } },[]); return( <Stepper label="Enter Number" secondaryLabel="From 1 to 10 inclusive" onChange={onChange} stateMessages={validationMessages} min={min} max={max} /> ); }
