WeekStrip

A week you tap through, the way the top of a phone's calendar works: seven days in a Segmented, each with its weekday and date, the chosen one lit, the light travelling there as a drop. Today carries a lit rail; a day with something on it has a pip. The keys at either end go a week back or forward, keeping the weekday.

Feel The top of a calendar app: tap a day and the light rolls over to it.

Or let the agent fetch it: get_component("week-strip") on the Echo MCP server.

Installation

npx echo-ui-cli add week-strip

First time? Run npx echo-ui-cli init once — it sets the project up, and add refuses to run before it.

At a glance

Version: 0.3.0
Weight: 3.9 KB · 45.1 KB with what it imports · 3.3 KB of CSS (minified and gzipped; React not counted)
Needs: hardware-button (Echo, brought with it), segmented (Echo, brought with it), date-tile (Echo, brought with it)
Keyboard: Arrow keys move between days, Home and End go to the first and last; the week keys are named with the week they go to.
Reduced motion: The light moves straight to the chosen day, as Segmented's does.
Sound: The select click as a day is chosen, and each week key's press, inside a SoundProvider.

Usage

tsx

import { WeekStrip } from "@/echo/week-strip";

<WeekStrip label="Day" today="2026-09-25" />

Composition

WeekStrip
  HardwareButton (week before)
  Segmented (the seven days)
  HardwareButton (week after)

Examples

Pick a day

Today lit by its rail, days with bookings marked.

tsx

<WeekStrip label="Day" today="2026-09-25" marked={["2026-09-22", "2026-09-26"]} />

Controlled

The chosen day in your state; the arrows move a week at a time.

tsx

<WeekStrip label="Delivery day" value={day} onValueChange={setDay} today={today} />

Accessibility

A group named by label, holding a radio group of days; each day is named with its full date, and says "today" and "has events" when it is and has.
Arrow keys move between days, Home and End go to the first and last; the week keys are named with the week they go to.
Worked in UTC from ISO dates, so the days are the same on the server and in every browser.
name submits the chosen day with a form.

Tested against WCAG 2.2 AA on every release:

axe — No axe violations, in the component's own gallery and on its page.
keyboard — Every action is reachable and operable from the keyboard alone.
focus-visible — Focus is visible on every focusable part, in normal and forced-colors mode.
forced-colors — State stays visible when the look's colours are replaced by the system's.
target-size — Every target's real hit area is at least 24×24px, at every density.
reflow — Content reflows into 320px and survives a doubled text size.

Not covered: screen-reader: not yet verified by a person. Everything above is a machine check; a person has not yet driven this component with a screen reader.

Motion & sound

Motion tokens: springs
Reduced motion: The light moves straight to the chosen day, as Segmented's does.
Sound: The select click as a day is chosen, and each week key's press, inside a SoundProvider.

Props

WeekStrip props
Prop	Type	Default
`id`The element's id, so a <label for> or an aria-describedby can reach it.	`string`
`name`The field's name in a form submission, and the key react-hook-form registers.	`string`
`disabled`	`boolean`	`false`
`required`	`boolean`
`readOnly`	`boolean`
`autoFocus`Focus this control when it mounts. One per page, at most.	`boolean`
`onBlur`Fired on focus loss. react-hook-form validates onTouched and onBlur with it.	`function`
`onFocus`Fired when the control takes focus.	`function`
`onKeyDown`Keyboard handling you own — Enter to send, Escape to clear. Runs before Echo's.	`function`
`label` requiredWhat the day is for: the group's accessible name ("Delivery day").	`string`
`value`The chosen day, as an ISO date (controlled).	`string`
`defaultValue`The day chosen to begin with. Default: today.	`string`
`onValueChange`Called with the ISO date of the day chosen.	`function`
`today`Today, which carries the lit rail.	`string`
`marked`Days with something on them: each gets a pip.	`string[]`
`weekStartsOn`The first day of the week: 1 Monday, 0 Sunday.	`0 \| 1`	`1`
`locale`The language days are named in.	`string`	`"en"`

Anti-patterns

Never use a WeekStrip to pick a date far away: it moves a week at a time; for any date, use a date field.
Never leave out today when there is one: without the rail, the strip doesn't say where now is.

Changelog

v0.3.0 · 2026-10-12 · ChangedEvery item needs echo-ui-core 0.3.0 (all components). The drawn device, readability past AA and the design tests live in core, and the components that use them are built against it, so each item now declares echo-ui-core >=0.3.0 <0.4.0. Update core with the items: npm install echo-ui-core@^0.3.0 (or your package manager's), then npx echo-ui-cli update. An item whose files didn't change is the same code under a new version; the 0.2.0 files stay published.
v0.2.0 · 2026-10-04 · AddedWeekStrip: a week you tap through. Seven days in a large Segmented, each with its weekday and date, the chosen one lit and the light travelling there as a drop. Today carries a lit rail, a day with something on it has a pip, and the keys at either end go a week back or forward, keeping the weekday. A radio group of days, each named with its full date.
v0.2.0 · 2026-10-04 · ChangedComments only, no behaviour change. Comments in the component source used to cite documents, milestones and ticket numbers from Echo's own planning, none of which exist in your project. The citations are gone and the sentences around them stay. Where a comment was only a citation, it now says what it meant. Three development warnings (HardwareButton's engraved/caption checks and StatusDot's missing-label check) also dropped the ticket code at the end of the message. echo-ui diff will show changes in most items; none of them are to code.
v0.2.0 · 2026-10-04 · ChangedAn item's version is now a function of declared data, not of how the changelog is formatted. The version an item ships under is published once and never rewritten, and it used to be inferred from prose: a regex for a bolded "Breaking" run across the whole unreleased section, and attribution by "does a bullet mention this name in backticks". One breaking entry therefore moved every item that changed that cycle, and an entry explaining that "Menu and Sheet are unchanged here" filed itself as a change to Menu and Sheet — which it really had.
v0.2.0 · 2026-10-04 · ChangedThe agent brief says Echo has not shipped. llms.txt and the MCP server's instructions led with npx echo-ui-cli init, and that name on npm is a reserved stub with no executable — so a model following the brief wrote an install step that fails with npx's own error. The brief now opens with the caveat, and the docs carry it on every surface that shows a command. One switch (CLI_RELEASED) silences all of them at launch, and a test refuses to let one move without the others. Affects all components only in what the brief says about installing them; no item's props, CSS or rendered semantics change.
v0.2.0 · 2026-10-04 · ChangedEcho's home is echo-ui.com. The registry, the docs and the packages all move to it from echo.nawwara.studio. Nothing was published under the old host, so no echo.json anywhere points at it and there is nothing to migrate — this is the last release where that is true.
v0.2.0 · 2026-10-04 · ChangedWeights, line heights, letter-spacing, z-index, border widths and icon sizes come from the theme scales in all components, with the old value as a fallback, so components keep working with echo-ui-core@0.0.1. Strays moved to the nearest step: most by under a pixel; HardwareButton icons are 14/16/20px (were 15/17/19).
v0.2.0 · 2026-10-04 · FixedA light device's recesses keep the body's hue in Chromium (echo-ui-core, BUG-166). Chromium drops the hue of a colour under 0.02 chroma when it mixes in oklch, and draws the mix at hue 0, a rose. A light device's plastic is that grey, so on a lilac body every field, track and rail was pink. A mix made only of greys is made in oklab now, which has no hue to lose; a mix with an accent in it stays in oklch. On a dark device nothing you can see changes.
v0.2.0 · 2026-10-04 · FixedWeekStrip's weekday letters are readable (BUG-145). Faded on top of the unchosen segment's dimmer text, the letters measured 3.6:1 on the screen behind them, and the chosen day's 3.9:1, under the 4.5:1 that text their size needs. They're quieter than the date by size alone now.
v0.2.0 · 2026-10-04 · FixedContent now reflows into a 320px screen (400% zoom) and survives a doubled browser text size (WCAG 1.4.10, 1.4.4), across all components. Select's 180px floor, NumberField's readout, Segmented and Steps as flex items, EmptyState's grid columns, and Avatar's fixed-pixel disc all gave way; Panel counts its padding inside a width you set (box-sizing: border-box), so a <Panel style={{ width: 220 }}> is now 220px wide overall rather than 260px.

Preview