Weekday Picker

Pro

Seven-day picker for repeating schedules. Days light up as you choose them, with optional presets like Weekdays and a summary line that reads your choice back in plain words.

Preview

Installation

npx @lumioui/cli add pro/weekday-picker

Usage

import { WEEKDAY_PRESETS, weekdayNames, localeWeekStart, orderedWeekdays, formatWeekdays, WeekdayPicker } from "@/components/ui/weekday-picker/weekday-picker";
<WeekdayPicker />

Also exported: WEEKDAY_PRESETS, weekdayNames, localeWeekStart, orderedWeekdays, formatWeekdays.

Examples

Alarm repeat

A clock app's alarm list.

Commute rides

A shared-ride app's commute schedule.

Habit schedule

A habit editor's schedule card.

Pickup windows

A courier's return-collection setup in a US locale, so the week starts on Sunday (and Sunday is closed).

API reference

Prop Type Default
value Weekday[]

Selected days (0 = Sunday). Controlled.

 —
defaultValue Weekday[]

Initial days for uncontrolled use. Default [].

 —
onValueChange (days: Weekday[]) => void

Fires with the new set (in display order) on every toggle or preset.

 —
weekStartsOn Weekday

First column. Defaults to the locale's week start, else Monday.

 —
locale string

BCP 47 locale for day labels and week start — "en-US", "de-DE".

 —
labels string[]

Override the seven labels (Sunday first).

 —
presets boolean | WeekdayPreset[]

Preset chips above the days. true = Weekdays / Weekends / Every day.

 false
showSummary boolean

Human summary line under the days ("Every weekday").

 false
formatSummary (days: Weekday[]) => string

Custom summary text. Default formatWeekdays.

 —
shape "circle" | "tile"

"circle" — round toggles (default). "tile" — rounded tiles that can carry an accessory line inside.

 "circle"
size "sm" | "md" | "lg" "md"
joinRuns boolean

Fuse neighbouring selected circles into one capsule.

 false
disabledDays Weekday[]

Days that can't be picked (a closed depot, a rest day).

 —
renderAccessory
(day: Weekday, selected: boolean) … (day: Weekday, selected: boolean) => React.ReactNode

Extra content per day — under the circle, or inside the tile.

 —
accessibilityLabel string

Group label for screen readers. Default "Repeat on".

 "Repeat on"
className string —