Segmented

Segmented 컴포넌트는 하나의 선택 그룹 내에서 여러 옵션 중 하나만 선택할 수 있는 UI 요소입니다.
버튼처럼 보이지만 토글 기능을 가지며, 선택된 항목에 따라 콘텐츠나 상태가 전환됩니다.
주로 필터, 정렬, 보기 모드 전환(예: 리스트 / 그리드) 등에 사용됩니다.

Variants
is-primary
Role
  구조 설명
tablist
상단 선택에 따라 아래 패널(콘텐츠 블록)을 교체
radiogroup
목록을 “필터링”만 함. 별도의 탭패널 영역 없음
Accessibility
키 동작 설명
Tab 활성 탭 → 다음 포커스 요소로 이동 현재 활성 탭(tabindex="0")에서 패널 내부 등 다음 포커스 가능한 요소로 이동.
다른 탭은 tabindex="-1"라서 Tab으로는 이동 불가.
Shift + Tab 활성 탭 → 이전 포커스 요소로 이동 Tab의 역방향 이동.
ArrowRight 다음 탭으로 포커스 이동 탭 포커스만 이동하며, 패널은 전환되지 않음.
마지막 탭에서 한 번 더 누르면 첫 번째 탭으로 순환.
ArrowLeft 이전 탭으로 포커스 이동 탭 포커스만 이동하며, 패널은 전환되지 않음.
첫 번째 탭에서 한 번 더 누르면 마지막 탭으로 순환.
Enter 또는 Space 현재 포커스된 탭 활성화 aria-selected="true" 적용 후, 연결된 패널(aria-controls) 표시.
화살표 이동 후 Enter/Space로 패널 전환 (수동 활성화 패턴)