Listbox
cuadro de lista
Un cuadro de lista es una lista personalizada de opciones. Administra qué opción está activa y cómo las teclas de flecha se mueven a través de la lista.
Un ejemplo real
Un despachador elige un depósito de entre 180 resultados buscables. Las teclas de flecha permiten desplazarse entre las opciones, y Enter selecciona una. Después de filtrar, un lector de pantalla aún anuncia el depósito elegido. Una lista fija y corta debería usar un `<select>` incorporado en su lugar.
Partes principales
- 01contenedor de cuadro de lista
- 02Opción activa
- 03Estado de selección
Úsalo cuando
Construye un cuadro de lista personalizado solo cuando un `<select>` integrado no puede manejar búsqueda, opciones enriquecidas o seleccionar varios elementos.
No lo uses cuando
No pongas botones, enlaces u otros controles separados dentro de una opción.
Nombre usado en código
role=listbox + role=option + aria-selected + roving focus/aria-activedescendant 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 cuadro de lista (Listbox). User context: Un despachador elige un depósito de entre 180 resultados buscables. Las teclas de flecha permiten desplazarse entre las opciones, y Enter selecciona una. Después de filtrar, un lector de pantalla aún anuncia el depósito elegido. Una lista fija y corta debería usar un `<select>` incorporado en su lugar. Recommended pattern: cuadro de lista (Listbox). Why it fits: Construye un cuadro de lista personalizado solo cuando un `<select>` integrado no puede manejar búsqueda, opciones enriquecidas o seleccionar varios elementos. Do not use it when: No pongas botones, enlaces u otros controles separados dentro de una opción. 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): Es oficial para esa fuente. Otras plataformas o equipos pueden usar el término de otra manera. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how cuadro de lista (Listbox) is used now. Definition: Un cuadro de lista es una lista personalizada de opciones. Administra qué opción está activa y cómo las teclas de flecha se mueven a través de la lista. 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.