Week Strip Day Picker

ProNew

Use this when a day is chosen from a scrolling strip: day buttons as native radios in a free-scroll row, the chosen day scrolled into view, a Today shortcut and that day's events listed underneath.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

todayId

label

defaultId

Guide and examples

When to use it

Use it in agenda, booking and scheduling screens where the next two to four weeks are enough and the day's content sits right below.

Do not use it to pick any date in the past or future. Use a calendar. It is for a short, near range.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`days`	`StripDay[]`	`-`	Each has an id, weekday, date number, month and events (strings).
`todayId`	`string`	`-`	Which day is today (marked and used by the Today button).
`label`	`string`	`-`	Accessible name of the strip.
`defaultId`	`string`	`todayId`	Day that starts chosen.

Accessibility

The days are native radio inputs in a fieldset with a legend, so arrow keys, the checked state and grouping come from the browser; the carousel keys step aside for radios.
Each day is named in full ("Tuesday 14 October, 2 events"), and today is marked in text.
The chosen day scrolls into view and its events appear in a polite status region.
Keyboard: Left / Right (or Up / Down): choose the previous or next day
Keyboard: Tab: leaves the strip

Testing

The pattern ships with a Testing Library test (week-strip-day-picker.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.