DaySelect

DaySelect is a controlled row of buttons for selecting one or more days of the week.

Figma LibraryView in StorybookAPI Reference

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { DaySelect } from '@adaptavant/eds-core';

Basic Usage​

DaySelect is controlled: pass the selected values through value and update them in the onChange callback. Toggling a day adds or removes its value from the array.

Selected: mon, thu, fri
const [value, setValue] = React.useState(['mon', 'thu', 'fri']);

return (
  <Box className="flex flex-col gap-4 items-start">
    <DaySelect onChange={setValue} value={value} />
    <Text className="text-body-14 text-secondary">
      Selected: {value.length ? value.join(', ') : 'none'}
    </Text>
  </Box>
);
View in Playroom

Size​

Use the size prop to switch between the two sizes. standard renders 3-letter labels in pill-shaped buttons; small renders 1-letter labels in compact circles.

Selected: mon, thu, fri
const [value, setValue] = React.useState(['mon', 'thu', 'fri']);

return (
  <Box className="flex flex-col gap-4 items-start">
    <DaySelect onChange={setValue} size="standard" value={value} />
    <DaySelect onChange={setValue} size="small" value={value} />
    <Text className="text-body-14 text-secondary">
      Selected: {value.length ? value.join(', ') : 'none'}
    </Text>
  </Box>
);
View in Playroom

Localised labels​

Set localeCode to render the default Monday-Sunday labels in another language. The values emitted through onChange stay stable ('mon'…'sun') regardless of locale — only the visible labels change.

To render those values elsewhere in your own UI, use getDayLabels(localeCode), which returns the same localized labels keyed by value.

Selected: lundi, mercredi, vendredi
const [value, setValue] = React.useState(['mon', 'wed', 'fri']);
const labels = getDayLabels('fr');

return (
  <Box className="flex flex-col gap-4 items-start">
    <DaySelect localeCode="fr" onChange={setValue} value={value} />
    <Text className="text-body-14 text-secondary">
      Selected:{' '}
      {value.length
        ? value.map((day) => labels[day].fullLabel).join(', ')
        : 'none'}
    </Text>
  </Box>
);
View in Playroom

onChange always emits the selection in Monday-first order, so no sorting is needed.

Keyboard interactions​

DaySelect is a single tab stop. Tab moves focus into the row and the next Tab moves out of it; within the row, focus is moved with the arrow keys.

KeyAction
TabMoves focus into the row, onto the last focused day, then out of the row
ArrowRightMoves focus to the next day, wrapping from Sunday to Monday
ArrowLeftMoves focus to the previous day, wrapping from Monday to Sunday
HomeMoves focus to the first day
EndMoves focus to the last day
Enter or SpaceToggles the focused day

Focus a day and use the arrow, Home and End keys to move between days.

API Reference​

DaySelect

DaySelect Component​

PropDefaultDescription
value_DayValue[]
The values of the currently selected days. DayValue is 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun'.
onChange_(value: DayValue[]) => void
Called with the next selected values whenever a day is toggled.
size?'standard''standard' | 'small'
The size of the day buttons. Standard shows 3-letter labels; small shows 1-letter labels.
localeCode?en'ar' | 'bg' | 'cs' | 'da' | 'de' | 'el' | 'en' | 'es' | 'et' | 'fi' | 'fr' | 'he' | 'hr' | 'hu' | 'is' | 'it' | 'ja' | 'ko' | 'lt' | 'lv' | 'nl' | 'no' | 'pl' | 'pt' | 'ro' | 'ru' | 'sl' | 'sq' | 'sr' | 'sv' | 'tr' | 'uk' | 'zh'
Locale code (ISO 639-1) for date localization.
aria-label?'Select days'string
Accessible label for the group of day buttons.

getDayLabels​

Returns the localized day labels keyed by the values emitted through onChange, for rendering a selection elsewhere in your UI.

const labels = getDayLabels('fr');
// labels.mon.fullLabel === 'lundi'

Parameters​

PropDefaultDescription
localeCode?'en'LocaleCode
Locale code (ISO 639-1) for the returned labels. Accepts the same values as the localeCode prop.

Return Value​

Record<DayValue, ...> keyed by day value, where each entry has:

PropDefaultDescription
value_DayValue
The day's stable value, e.g. 'mon'.
label_string
The 3-letter form, e.g. 'Mon'. Rendered at the 'standard' size.
shortLabel_string
The 1-letter form, e.g. 'M'. Rendered at the 'small' size.
fullLabel_string
The full weekday name, e.g. 'Monday'. Used as each button's accessible label.

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

DaySelect parts​

DaySelect exposes two style parts: root (the role="toolbar" row wrapping all the day buttons) and day (each individual day toggle button).

const [value, setValue] = React.useState(['mon', 'thu', 'fri']);

return (
  <DaySelect
    className="lg:gap-2 gap-3"
    classNames={{
      day: 'rounded-md',
    }}
    onChange={setValue}
    value={value}
  />
);
View in Playroom