Toggle Group
토글 그룹
끄고 켤 수 있는 버튼 묶음에 라벨이 붙어 있어요. 한 개 이상의 선택지가 눌린 상태로 남을 수 있어요.
실제 예시
글 편집기는 굵게와 기울임을 동시에 켤 수 있어. 각 버튼은 눌렸는지 안 눌렸는지 알려줘.
주요 부분
- 01시각적 레이블
- 02Interaction target
- 03Current state
- 04Keyboard behavior
사용할 때
현재 상태가 보여야 하는 몇 가지 작고 되돌릴 수 있는 모드용으로 사용하세요.
다음 경우에는 사용하지 마세요
정확히 하나의 선택만 제출할 수 있을 때는 라디오 버튼을 사용하십시오. 일반 양식 선택에는 체크박스를 사용하십시오.
코드에서 사용된 이름
button[aria-pressed] in a labeled group 출시하기 전에
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 토글 그룹 (Toggle Group)。 User context：글 편집기는 굵게와 기울임을 동시에 켤 수 있어. 각 버튼은 눌렸는지 안 눌렸는지 알려줘. Recommended pattern：토글 그룹 (Toggle Group)。 Why it fits：현재 상태가 보여야 하는 몇 가지 작고 되돌릴 수 있는 모드용으로 사용하세요. Do not use it when：정확히 하나의 선택만 제출할 수 있을 때는 라디오 버튼을 사용하십시오. 일반 양식 선택에는 체크박스를 사용하십시오. 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)：하나의 공식 표준이 전체 용어를 통제하지 않음. 의미는 팀, 플랫폼 또는 프레임워크마다 달라질 수 있음. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 토글 그룹 (Toggle Group) is used now. Definition: 끄고 켤 수 있는 버튼 묶음에 라벨이 붙어 있어요. 한 개 이상의 선택지가 눌린 상태로 남을 수 있어요. 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.