# Weekday Picker

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.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/weekday-picker
```

## Import

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

## Variants

- `alarm` — Alarm repeat: `npx @lumioui/cli add pro/weekday-picker-alarm`
- `commute` — Commute rides: `npx @lumioui/cli add pro/weekday-picker-commute`
- `habit` — Habit schedule: `npx @lumioui/cli add pro/weekday-picker-habit`
- `pickup` — Pickup windows: `npx @lumioui/cli add pro/weekday-picker-pickup`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `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. |
| `showSummary?` | `boolean` | Human summary line under the days ("Every weekday"). |
| `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. |
| `size?` | `"sm" | "md" | "lg"` | — |
| `joinRuns?` | `boolean` | Fuse neighbouring selected circles into one capsule. |
| `disabledDays?` | `Weekday[]` | Days that can't be picked (a closed depot, a rest day). |
| `renderAccessory?` | `(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". |
| `className?` | `string` | — |

Source: https://lumioui.com/components/weekday-picker