DayPicker

한눈에#

반복 일정의 요일/일자를 다중 선택합니다 — week는 일토 7버튼(06), monthly는 1~31 그리드를 aria-pressed 토글 버튼 그룹으로 제공합니다.

사용 시점#

매주/매월 반복되는 요일·일자를 다중 선택하면 DayPicker — 특정 날짜나 일반 다중 선택은 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { DayPicker } from '@wds/ui-web';

<DayPicker aria-label="반복 요일" />

변형#

mode가 변형 축입니다 — 'week'(기본)는 일토 7버튼(값 06), 'monthly'는 131 일자를 달력과 같은 7열 그리드(값 131)로 펼칩니다.

weekLabels로 week 모드 라벨을 오버라이드할 수 있습니다(7개, 기본 일~토 — 값 인덱스는 일=0 … 토=6 고정).

크기#

단일 크기입니다 — 버튼은 control.height-md(44px) 정사각으로 터치 히트 영역을 그대로 충족합니다. monthly 그리드는 7열로 고정되어 한 달 31일이 5줄 안에 들어갑니다.

상태#

• 선택 — aria-pressed="true" + color.primary 채움 + color.on-primary 잉크
• Hover — 미선택 color.surface-hover · 선택 color.primary-hover
• Focus — :focus-visible에 color.primary 아웃라인 링
• Disabled — disabled 배열의 값은 버튼 disabled로 클릭·토글 차단

비제어 컴포넌트입니다 — defaultValue로 시작하고 토글마다 오름차순 정렬된 onChange(values)로 알립니다.

Props#

접근성#

루트가 role="group"이고 aria-label이 필수입니다 — 버튼 7~31개가 하나의 질문("어느 요일/일자에 반복?")에 속함을 보조기술에 알립니다. 각 버튼은 네이티브 button + aria-pressed 토글 버튼입니다.

비활성 값은 disabled로 보고되어 포커스·클릭이 차단되고, 선택 상태는 색상만이 아니라 aria-pressed로도 전달됩니다.

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족 — Calendar의 선택 어휘 공유).