Week Day Selector

Compact weekday picker with single or multi-day selection, multiple shapes, joined or spaced layouts, and full keyboard support.

Basic Usage

Single & Multiple Selection

Single returns a day number, multiple returns an array.

Single (selected: 1)

Multiple (selected: [1, 3, 5])

Days are 0-indexed: 0 = Sunday, 6 = Saturday.

import { WeekDaySelector } from 'fluxo-ui';

const [day, setDay] = useState<number | null>(1);
<WeekDaySelector value={day} onChange={setDay} />

const [days, setDays] = useState<number[]>([1, 3, 5]);
<WeekDaySelector multiple value={days} onChange={setDays} />

Fill Styles

Solid (filled background), outlined (border-only), or subtle (tinted background).

solid

default

primary

success

danger

outlined

default

primary

success

danger

subtle

default

primary

success

danger

<WeekDaySelector fill="solid"    variant="primary" multiple defaultValue={[1, 3, 5]} />
<WeekDaySelector fill="outlined" variant="primary" multiple defaultValue={[1, 3, 5]} />
<WeekDaySelector fill="subtle"   variant="primary" multiple defaultValue={[1, 3, 5]} />

Shapes

Rounded pill, squared, or circle.

Rounded

Squared

Circle

<WeekDaySelector shape="rounded" defaultValue={2} />
<WeekDaySelector shape="squared" defaultValue={2} />
<WeekDaySelector shape="circle" defaultValue={2} />

Spacing

Spaced or joined (segmented) layouts.

Spaced

Joined (no gap, shared borders)

Joined + squared

<WeekDaySelector spacing="spaced" multiple defaultValue={[1, 3]} />
<WeekDaySelector spacing="joined" multiple defaultValue={[1, 3]} />

Sizes & Variants

Sizes & Color Variants

Three sizes and four color variants.

sm / primary

md / success

lg / danger

default (neutral)

firstDayOfWeek = 1 (Monday start), disabled weekend

<WeekDaySelector size="sm" variant="primary" defaultValue={3} />
<WeekDaySelector size="md" variant="success" defaultValue={3} />
<WeekDaySelector size="lg" variant="danger" defaultValue={3} />

Import

import { WeekDaySelector } from 'fluxo-ui';
import type { WeekDaySelectorProps } from 'fluxo-ui';

Props

PropertyTypeDefaultDescription

value

number | number[] | null

—

Controlled value. Single returns number, multiple returns number[].

value

number | number[] | null

Controlled value. Single returns number, multiple returns number[].

defaultValue

number | number[] | null

—

Uncontrolled default value.

defaultValue

number | number[] | null

Uncontrolled default value.

multiple

boolean

"false"

Enable multi-day selection.

multiple

boolean"false"

Enable multi-day selection.

shape

'rounded' | 'squared' | 'circle'

"'rounded'"

Button shape.

shape

'rounded' | 'squared' | 'circle'"'rounded'"

Button shape.

spacing

'spaced' | 'joined'

"'spaced'"

Gap between items (joined shares borders).

spacing

'spaced' | 'joined'"'spaced'"

Gap between items (joined shares borders).

size

'sm' | 'md' | 'lg'

"'md'"

Button size.

size

'sm' | 'md' | 'lg'"'md'"

Button size.

variant

'default' | 'primary' | 'success' | 'danger'

"'primary'"

Selected color variant.

variant

'default' | 'primary' | 'success' | 'danger'"'primary'"

Selected color variant.

fill

'solid' | 'outlined' | 'subtle'

"'solid'"

How selected items are styled — filled background, border-only, or tinted background.

fill

'solid' | 'outlined' | 'subtle'"'solid'"

How selected items are styled — filled background, border-only, or tinted background.

firstDayOfWeek

number

"0"

First day of week (0=Sun, 1=Mon).

firstDayOfWeek

number"0"

First day of week (0=Sun, 1=Mon).

labels

string[]

—

Custom day labels. Defaults to [Su, Mo, Tu, We, Th, Fr, Sa].

labels

string[]

Custom day labels. Defaults to [Su, Mo, Tu, We, Th, Fr, Sa].

disabledDays

number[]

—

Array of disabled day indexes (0–6).

disabledDays

number[]

Array of disabled day indexes (0–6).

disabled

boolean

"false"

Disable the entire control.

disabled

boolean"false"

Disable the entire control.

onChange

(value) => void

—

Called on selection change.

onChange

(value) => void

Called on selection change.