Tree Select
Selección de Árbol
Un Tree Select muestra opciones anidadas en un árbol que puedes abrir. Puede permitir elegir una o varias opciones.
Un ejemplo real
Un administrador asigna un informe a equipos. Los niveles de empresa y departamento se mantienen visibles durante la selección.
Partes principales
- 01Etiqueta persistente
- 02Input control
- 03Hint or format
- 04Validation message
Úsalo cuando
Úselo cuando las personas deben ver la jerarquía mientras eligen uno o más elementos.
No lo uses cuando
No metas un árbol enorme en una ventana pequeña sin buscador, desplazamiento virtual y estados parciales claros.
Nombre usado en código
role=tree + treeitem + selection state 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 Selección de Árbol (Tree Select). User context: Un administrador asigna un informe a equipos. Los niveles de empresa y departamento se mantienen visibles durante la selección. Recommended pattern: Selección de Árbol (Tree Select). Why it fits: Úselo cuando las personas deben ver la jerarquía mientras eligen uno o más elementos. Do not use it when: No metas un árbol enorme en una ventana pequeña sin buscador, desplazamiento virtual y estados parciales claros. 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): Ningún estándar oficial único controla todo el término. Su significado puede cambiar según equipos, plataformas o marcos. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Selección de Árbol (Tree Select) is used now. Definition: Un Tree Select muestra opciones anidadas en un árbol que puedes abrir. Puede permitir elegir una o varias opciones. 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.