Date, time & colour

Pick dates, times and colours.

Date pickers #

Dates, ranges, months and years.

DatePicker #

Trigger + calendar dropdown. Opening focuses the active day; picking a day or Escape closes and returns focus to the trigger.

Due date

function Example() {
    const due = signal("2026-09-29");
    return <DatePicker value={due()} onChange={due.set} label="Due date" />;
}

Slots: root calendar dropdown label trigger value

Prop	Type	Description
`isDateDisabled`	`(iso: string) => boolean`	Return `true` for days that can't be picked (`YYYY-MM-DD`).
`label`	`string`	Visible label, linked to the trigger.
`locale`	`string`	BCP 47 locale for month / day labels (default: runtime locale).
`max`	`string`	Latest selectable date, YYYY-MM-DD.
`min`	`string`	Earliest selectable date, YYYY-MM-DD.
`onChange`	`(iso: string) => void`	Called with the picked day as `YYYY-MM-DD`.
`placeholder`	`string`	Trigger text while no day is picked.
`value`	`string`	Selected day, `YYYY-MM-DD` (controlled).
`weekStartsOn`	`Weekday`	First column: 0 = Sunday (default) … 6 = Saturday.

Weekday

type Weekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;

DateRangePicker #

Two-step date range picker (start → end).

function Example() {
    const range = signal<DateRange>({ start: "2026-10-05", end: "2026-10-09" });
    return <DateRangePicker placeholder="Select dates" value={range()} onChange={range.set} />;
}

Slots: root cell dropdown summary trigger

Prop	Type	Required	Default	Description
`onChange`	`(range: DateRange) => void`	yes		Called after each pick: first with `start` only, then with both ends.
`value`	`DateRange`	yes		Selected range (controlled).
`placeholder`	`string`		`"Pick date range"`	Trigger text when nothing is picked.

DateRange

Field	Type	Required	Description
`start`	`string`		First day, `YYYY-MM-DD`.
`end`	`string`		Last day, `YYYY-MM-DD` (unset while the second click is pending).

DateInput #

Native date field; forwarded attributes land on the <input>.

function Example() {
    const date = signal("2026-10-01");
    return <DateInput aria-label="Start date" value={date()} onChange={date.set} />;
}

Prop	Type	Required	Description
`onChange`	`(value: string) => void`	yes	Called with the new value in the native format.
`value`	`string`	yes	Value in the native format: `YYYY-MM-DD` (date) or `HH:MM` (time).
`disabled`	`boolean`		Disables the field.
`invalid`	`boolean`		Marks the value invalid (`aria-invalid` and error styling).
`name`	`string`		Field name submitted with the form.

Calendar #

Month grid (WAI-ARIA date grid): one tab stop, ← → ↑ ↓ by day/week, PageUp/PageDown by month (Shift = year), Home/End week edges, full-date labels, aria-selected / aria-current="date", min / max / isDateDisabled.

September 2026

SuMoTuWeThFrSa

Selected: 2026-09-29

function Example() {
    const date = signal("2026-09-29");
    return (
        <Stack gap="0.5rem">
            <Calendar value={date()} onChange={date.set} />
            <Text muted>Selected: {date()}</Text>
        </Stack>
    );
}

Slots: root cell day grid header label nav row table weekday weekdays

Prop	Type	Default	Description
`autoFocus`	`boolean`		Focus the active day on mount (used by DatePicker).
`isDateDisabled`	`(iso: string) => boolean`		Return `true` for days that can't be picked (`YYYY-MM-DD`).
`locale`	`string`		BCP 47 locale for month / day labels (default: runtime locale).
`max`	`string`		Latest selectable date, YYYY-MM-DD.
`min`	`string`		Earliest selectable date, YYYY-MM-DD.
`onChange`	`(iso: string) => void`		Called with the picked day as `YYYY-MM-DD`.
`value`	`string`		YYYY-MM-DD
`weekStartsOn`	`Weekday`	`0`	First column: 0 = Sunday (default) … 6 = Saturday.

Weekday

type Weekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;

MonthPicker #

Month/year picker.

2026

Selected: 2026-10

function Example() {
    const month = signal("2026-10");
    return (
        <>
            <MonthPicker value={month()} onChange={month.set} />
            <Text muted>Selected: {month()}</Text>
        </>
    );
}

Slots: root cell grid header title

Prop	Type	Description
`monthLabels`	`string[]`	Month labels (default English short names).
`onChange`	`(ym: string) => void`	Called with the picked month as `YYYY-MM`.
`value`	`string`	YYYY-MM

YearPicker #

Twelve-year grid with paging.

2020–2031

Selected: 2026

function Example() {
    const year = signal(2026);
    return (
        <>
            <YearPicker value={year()} onChange={year.set} />
            <Text muted>Selected: {year()}</Text>
        </>
    );
}

Slots: root cell grid header title

Prop	Type	Required	Default	Description
`onChange`	`(year: number) => void`			Called with the picked year.
`value`	`number`			Selected year.

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

Time pickers #

Times of day.

TimeInput #

Native time field; forwarded attributes land on the <input>.

function Example() {
    const time = signal("09:30");
    return <TimeInput aria-label="Start time" value={time()} onChange={time.set} />;
}

Prop	Type	Required	Description
`onChange`	`(value: string) => void`	yes	Called with the new value in the native format.
`value`	`string`	yes	Value in the native format: `YYYY-MM-DD` (date) or `HH:MM` (time).
`disabled`	`boolean`		Disables the field.
`invalid`	`boolean`		Marks the value invalid (`aria-invalid` and error styling).
`name`	`string`		Field name submitted with the form.

TimePicker #

Hours/minutes picker.

09:30

Selected: 09:30

function Example() {
    const time = signal("09:30");
    return (
        <>
            <TimePicker value={time()} onChange={time.set} />
            <Text muted>Selected: {time()}</Text>
        </>
    );
}

Slots: root cell column header value

Prop	Type	Default	Description
`minutesStep`	`number`	`5`	Minute options' interval.
`onChange`	`(time: string) => void`		Called with the picked time as `HH:MM`.
`value`	`string`	`"12:00"`	HH:MM

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

Colour #

Colour inputs, pickers and swatches.

ColorInput #

Color swatch + hex text field. The text <input> is the host; classes.root styles the wrapper.

function Example() {
    const color = signal("#4f46e5");
    return <ColorInput aria-label="Brand colour" value={color()} onChange={color.set} />;
}

Slots: root input swatch

Prop	Type	Required	Default	Description
`onChange`	`(value: string) => void`	yes		Called with the new colour (typed or picked).
`value`	`string`	yes		Colour as hex, e.g. `#4f46e5` (controlled).
`disabled`	`boolean`			Disables the field and swatch.
`invalid`	`boolean`			Marks the value invalid (`aria-invalid` and error styling).
`name`	`string`			Field name submitted with the form.
`swatchLabel`	`string`		`"Color"`	Accessible name for the swatch picker (default "Color").

ColorPicker #

Native color input + swatches.

#1e87f0

Selected: #1e87f0

function Example() {
    const color = signal("#1e87f0");
    return (
        <Stack gap="0.5rem">
            <ColorPicker value={color()} onChange={color.set} />
            <Text muted>
                Selected: <code>{color()}</code>
            </Text>
        </Stack>
    );
}

Slots: root native swatch swatches value

Prop	Type	Required	Default	Description
`onChange`	`(color: string) => void`	yes		Called with the picked colour.
`value`	`string`	yes	`""`	Selected colour (controlled), e.g. `#1e87f0`.
`swatches`	`string[]`			Preset colours shown as swatches.

ColorSwatch #

Color chip; renders a <button> when onClick is set (use selected for a picker).

Brand colour: #fca311

function Example() {
    const brand = signal("#fca311");
    const colors = ["#fca311", "#14213d", "#e11d48", "#047857", "#7c3aed", "#0ea5e9"];
    return (
        <Stack gap="0.5rem">
            <Group gap="0.5rem">
                <For each={colors}>
                    {(color) => (
                        <ColorSwatch
                            color={color}
                            selected={brand() === color}
                            onClick={() => brand.set(color)}
                        />
                    )}
                </For>
            </Group>
            <Text muted>
                Brand colour: <code>{brand()}</code>
            </Text>
        </Stack>
    );
}

Prop	Type	Required	Default	Description
`color`	`string`	yes		Any CSS colour.
`children`	`content`			Content inside the swatch (replaces the check mark when `selected`).
`label`	`string`			Accessible name (default `Color <color>`).
`onClick`	`(e: MouseEvent) => void`			Makes the swatch a button; called when it is pressed.
`selected`	`boolean`			Marks the chosen swatch (ring + check; `aria-pressed` when clickable).
`size`	`number`		`28`	Diameter in pixels.
`withShadow`	`boolean`			Adds a soft drop shadow.

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.