Day of Week Picker

Usage

import { DayOfWeekPicker } from '@epilot/spark-ui/day-of-week-picker'

Spark ships no language default. Pass dayLabels and daysAriaLabel from your i18n layer. When showPresets is true, presetLabels and presetsAriaLabel are required too.

function ScheduleDays() {
  const [value, setValue] = useState<WeekDay[]>(['monday'])

  return (
    <DayOfWeekPicker
      value={value}
      onValueChange={setValue}
      dayLabels={DAY_LABELS}
      dayAriaLabels={DAY_ARIA_LABELS}
      daysAriaLabel={t('daysOfWeek')}
      showPresets
      presetLabels={{
        weekdays: t('weekdays'),
        weekend: t('weekend'),
        everyDay: t('everyDay'),
      }}
      presetsAriaLabel={t('dayPresets')}
    />
  )
}

Use Day of Week Picker for repeating schedules (device charge windows, tariff rules). For a single calendar date, use Calendar or Input Date.

Examples

Without presets

Omit showPresets when only the seven day chips are needed.

API Reference

Prop	Type	Default	Description
`value`	`WeekDay[]`	—	Selected days, ordered Monday to Sunday.
`onValueChange`	`(next: WeekDay[]) => void`	—	Fires with the next selection when a chip or preset is pressed.
`dayLabels`	`Record<WeekDay, string>`	—	Visible short label on each chip. Required.
`dayAriaLabels`	`Partial<Record<WeekDay, string>>`	chip label	Full accessible name per day. Falls back to `dayLabels`.
`daysAriaLabel`	`string`	—	Accessible label for the day chip group. Required.
`showPresets`	`boolean`	`false`	Shows Weekdays / Weekend / Every day shortcuts.
`presetLabels`	`{ weekdays, weekend, everyDay }`	—	Preset button labels. Required when `showPresets` is true.
`presetsAriaLabel`	`string`	—	Accessible label for the preset row. Required when `showPresets` is true.
`disabled`	`boolean`	`false`	Disables chips and presets.
`className`	`string`	—	Merges with the root flex column.

Each day chip is a role="checkbox" with aria-checked. Prefer dayAriaLabels with the full weekday name so screen readers do not only hear the short chip text. Preset buttons use aria-pressed for the active preset.

Day of Week Picker

Usage

Examples

Without presets

API Reference

Accessibility

On this page