Toggle Group
Grupo de alternancia
Un grupo etiquetado de botones que se activan o desactivan. Una o más opciones separadas pueden quedarse presionadas.
Un ejemplo real
Un editor de texto deja activados la Negrita y la Cursiva al mismo tiempo. Cada botón indica si está pulsado.
Partes principales
- 01Etiqueta visible
- 02Interaction target
- 03Current state
- 04Keyboard behavior
Úsalo cuando
Úselo para unos pocos modos pequeños y reversibles cuyos estados actuales deben permanecer visibles.
No lo uses cuando
Usa botones de opción cuando exactamente se pueda enviar una sola elección. Usa casillas de verificación para elecciones normales del formulario.
Nombre usado en código
button[aria-pressed] in a labeled group Antes de lanzarlo
Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery.
Outcome: Complete the task with Grupo de alternancia (Toggle Group). User context: Un editor de texto deja activados la Negrita y la Cursiva al mismo tiempo. Cada botón indica si está pulsado. Recommended pattern: Grupo de alternancia (Toggle Group). Why it fits: Úselo para unos pocos modos pequeños y reversibles cuyos estados actuales deben permanecer visibles. Do not use it when: Usa botones de opción cuando exactamente se pueda enviar una sola elección. Usa casillas de verificación para elecciones normales del formulario. 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 Grupo de alternancia (Toggle Group) is used now. Definition: Un grupo etiquetado de botones que se activan o desactivan. Una o más opciones separadas pueden quedarse presionadas. Release checks: Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.