#DateInput

A date typed segment by segment, for a date the reader knows — pair it with Calendar when they need to see the month to choose. It takes React Aria date objects rather than a JavaScript Date, and segment order and hour cycle come from DateFormatProvider app-wide rather than per input.

Source · Storybook

#Usage

import { DateInput } from '@wallarm-org/design-system/DateInput';

#Examples

#With icon

The calendar icon is decoration here, not a trigger — this field opens nothing. Reach for Calendar when the icon should open a picker.

#States

Default, disabled and error side by side. error reddens the border and marks the field invalid; the reason belongs in FieldError.

#Sizes

The same 36 / 32 / 24px scale as the other fields, so a date sits in a row of inputs without breaking the line.

#Filled

A field holding a value, next to one holding a placeholder. The clear affordance only appears once there is something to clear.

#Granularity

granularity decides how many segments there are, from a day down to a second. Ask for the smallest unit you will actually use — every extra segment is another thing to tab through.

#With field components

Inside Field, which supplies the label and description. The field does not read that context, so check the labelling rather than assuming it wired itself.

#Date order comparison

Day-first against month-first, each in its own scoped provider. This is an app-wide decision, not a per-field one — the comparison exists to show what the provider changes.

#Hour cycle by context

12-hour against 24-hour, again from the provider. There is no per-input escape hatch, which is deliberate: a form mixing both would be unreadable.

#Read only

readOnly keeps the value legible and removes every edit affordance. Different from disabled, which says the control exists but is unavailable.

#Props