Spinbutton
Botón de selección
Spinbutton es el nombre ARIA para un control que elige un valor de un rango establecido. Las personas normalmente pueden escribir un valor o aumentarlo y disminuirlo. Un selector numérico es una forma en que puede verse.
Un ejemplo real
Un trabajador de laboratorio establece una temperatura de 37,5°C. Flecha Arriba suma 0,5, Re Pág suma 5, y el valor se detiene en el máximo verificado de 45°C. Pegar texto inválido muestra un error en lugar de cambiarlo silenciosamente.
Partes principales
- 01Valor editable
- 02controles de incremento
- 03Límites y paso
Úsalo cuando
Úsalo cuando las personas ajusten a menudo un valor por pasos establecidos y también necesiten escribir el valor. El valor debe tener límites claros.
No lo uses cuando
Los botones de más y menos solos no constituyen un spinbutton. Evítalos para valores sin límites, listas de selección muy largas o tareas donde un input normal sea más claro.
Nombre usado en código
input[type=number] or role=spinbutton with valuemin/valuemax/valuenow Antes de lanzarlo
Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages.
Outcome: Complete the task with Botón de selección (Spinbutton). User context: Un trabajador de laboratorio establece una temperatura de 37,5°C. Flecha Arriba suma 0,5, Re Pág suma 5, y el valor se detiene en el máximo verificado de 45°C. Pegar texto inválido muestra un error en lugar de cambiarlo silenciosamente. Recommended pattern: Botón de selección (Spinbutton). Why it fits: Úsalo cuando las personas ajusten a menudo un valor por pasos establecidos y también necesiten escribir el valor. El valor debe tener límites claros. Do not use it when: Los botones de más y menos solos no constituyen un spinbutton. Evítalos para valores sin límites, listas de selección muy largas o tareas donde un input normal sea más claro. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): El estándar cubre únicamente el alcance listado. No elige el estilo visual, la decisión del producto ni el ejemplo de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Botón de selección (Spinbutton) is used now. Definition: Spinbutton es el nombre ARIA para un control que elige un valor de un rango establecido. Las personas normalmente pueden escribir un valor o aumentarlo y disminuirlo. Un selector numérico es una forma en que puede verse. Release checks: Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.