Date Input

A typeable, segmented date field (month/day/year cells you type digits into directly, à la native <input type="date">), not a calendar-only picker.

Real use · typeable date field (type digits or paste)

2026

Wed Jul 08 2026

Locale-driven segment order (en-US vs en-GB vs de-DE)

2026

DateRangeInput

yyyy

… — …

Sizes / disabled

2026

Using Date Input

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { DateInput } from "@wizeworks/silicaui-react";

Props

DateInputProps

Prop	Type	Required	Description
value	Date \| null	no	Controlled value. null clears the field.
defaultValue	Date \| null	no	—
onValueChange	(value: Date \| null) => void	no	Fires once every segment is filled with a valid date; null while incomplete/cleared.
min	Date	no	Selectable bounds (inclusive); an out-of-range completed date is clamped.
max	Date	no	—
locale	string	no	BCP-47 locale — drives segment order (MM/DD/YYYY vs DD/MM/YYYY, …) and separators.
disabled	boolean	no	—
color	DateInputColor	no	—
size	DateInputSize	no	—
className	string	no	—
id	string	no	—
"aria-label"	string	no	—

DateRangeInputProps

Prop	Type	Required	Description
value	DateRange	no	—
defaultValue	DateRange	no	—
onValueChange	(value: DateRange) => void	no	—
min	Date	no	—
max	Date	no	—
locale	string	no	—
disabled	boolean	no	—
color	DateInputColor	no	—
size	DateInputSize	no	—
className	string	no	—
"aria-label"	string	no	—

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import { useState } from "react";
import { DateInput, DateRangeInput } from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";

export function DateInputDemo() {
    const [date, setDate] = useState<Date | null>(new Date(2026, 6, 8));
    const [range, setRange] = useState<{ start: Date | null; end: Date | null }>({
        start: null,
        end: null,
    });

    return (
        <>
            <Section title="Real use · typeable date field (type digits or paste)">
                <DateInput value={date} onValueChange={setDate} color="primary" />
                <p className="mt-2 text-sm opacity-70">
                    {date ? date.toDateString() : "No date"}
                </p>
            </Section>

            <Section title="Locale-driven segment order (en-US vs en-GB vs de-DE)">
                <Row>
                    <DateInput locale="en-US" defaultValue={new Date(2026, 6, 8)} />
                    <DateInput locale="en-GB" defaultValue={new Date(2026, 6, 8)} />
                    <DateInput locale="de-DE" defaultValue={new Date(2026, 6, 8)} />
                </Row>
            </Section>

            <Section title="DateRangeInput">
                <DateRangeInput value={range} onValueChange={setRange} />
                <p className="mt-2 text-sm opacity-70">
                    {range.start ? range.start.toDateString() : "…"} —{" "}
                    {range.end ? range.end.toDateString() : "…"}
                </p>
            </Section>

            <Section title="Sizes / disabled">
                <Row>
                    <DateInput size="sm" defaultValue={new Date(2026, 6, 8)} />
                    <DateInput size="md" defaultValue={new Date(2026, 6, 8)} />
                    <DateInput size="lg" defaultValue={new Date(2026, 6, 8)} />
                    <DateInput disabled defaultValue={new Date(2026, 6, 8)} />
                </Row>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

date-segment — DateInput/DateTimeInput/TimeInput carry the behavior on their own root; DateRangeInput is two INDEPENDENT date-segment roots nested side by side (hydrate() scans the whole document for behavior roots, not just top-level ones, so both wire up with zero extra code). Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("DateInput", undefined, { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "… …-primary" rather than passing a colour as a prop.

Takes children: no
Hydrated by: date-segment

Load @wizeworks/silicaui-behaviors on the page or this markup renders correctly and does nothing.

The full API for Date Input, on every path, is available through the Silica MCP server.