DateInput

A date picker input that combines a text input with a calendar popover. Users can type a date directly or select one from the calendar.

Examples

Default

Due date

Choose Due date

(args: DateInputProps) => {
  const [value, setValue] = useState<PlainDate | null>(() =>
    plainDateCreate(2026, 5, 21),
  );
  return <DateInput {...args} onChange={setValue} value={value} />;
}

Placeholder

Due date

Choose Due date

(args: DateInputProps) => {
  const [value, setValue] = useState<PlainDate | null>(null);
  return <DateInput {...args} onChange={setValue} value={value} />;
}

With Constraints

Due date

Choose Due date

Clear Due date

(args: DateInputProps) => {
  const [value, setValue] = useState<PlainDate | null>(() =>
    plainDateCreate(2026, 5, 21),
  );
  return (
    <DateInput
      {...args}
      max={plainDateCreate(2026, 5, 28)}
      min={plainDateCreate(2026, 5, 10)}
      onChange={setValue}
      value={value}
    />
  );
}

Disabled

Due date

Choose Due date

<DateInput
  {...args}
  onChange={() => {}}
  value={plainDateCreate(2026, 5, 21)}
/>

Loading

Due date

Choose Due date

<DateInput
  {...args}
  onChange={() => {}}
  value={plainDateCreate(2026, 5, 21)}
/>

With Description

Due dateChoose the date this task is due.

Choose Due date

(args: DateInputProps) => {
  const [value, setValue] = useState<PlainDate | null>(() =>
    plainDateCreate(2026, 5, 21),
  );
  return <DateInput {...args} onChange={setValue} value={value} />;
}

Required

Due date · Required

Choose Due date

(args: DateInputProps) => {
  const [value, setValue] = useState<PlainDate | null>(() =>
    plainDateCreate(2026, 5, 21),
  );
  return <DateInput {...args} onChange={setValue} value={value} />;
}

Optional

Due date · Optional

Choose Due date

(args: DateInputProps) => {
  const [value, setValue] = useState<PlainDate | null>(() =>
    plainDateCreate(2026, 5, 21),
  );
  return <DateInput {...args} onChange={setValue} value={value} />;
}

Hidden Label

Due date

Choose Due date

(args: DateInputProps) => {
  const [value, setValue] = useState<PlainDate | null>(() =>
    plainDateCreate(2026, 5, 21),
  );
  return <DateInput {...args} onChange={setValue} value={value} />;
}

Error Status

Due date

Choose Due date

Date is required

(args: DateInputProps) => {
  const [value, setValue] = useState<PlainDate | null>(null);
  return <DateInput {...args} onChange={setValue} value={value} />;
}

Warning Status

Due date

Choose Due date

Date is in the past

(args: DateInputProps) => {
  const [value, setValue] = useState<PlainDate | null>(() =>
    plainDateCreate(2024, 1, 15),
  );
  return <DateInput {...args} onChange={setValue} value={value} />;
}

Success Status

Due date

Choose Due date

Date is available

(args: DateInputProps) => {
  const [value, setValue] = useState<PlainDate | null>(() =>
    plainDateCreate(2026, 5, 21),
  );
  return <DateInput {...args} onChange={setValue} value={value} />;
}

Sizes

Small

Choose Small

Medium

Choose Medium

Large

Choose Large

() => {
  const [sm, setSm] = useState<PlainDate | null>(() =>
    plainDateCreate(2026, 5, 21),
  );
  const [md, setMd] = useState<PlainDate | null>(() =>
    plainDateCreate(2026, 5, 21),
  );
  const [lg, setLg] = useState<PlainDate | null>(() =>
    plainDateCreate(2026, 5, 21),
  );
  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
      <DateInput label="Small" onChange={setSm} size="sm" value={sm} />
      <DateInput label="Medium" onChange={setMd} size="md" value={md} />
      <DateInput label="Large" onChange={setLg} size="lg" value={lg} />
    </div>
  );
}

Formats

Long (default)January 15, 2026

Choose Long (default)

ShortJan 15, 2026

Choose Short

ISO2026-01-15

Choose ISO

Custom functionAny function of the selected date

Choose Custom function

() => {
  const [long, setLong] = useState<PlainDate | null>(() =>
    plainDateCreate(2026, 1, 15),
  );
  const [short, setShort] = useState<PlainDate | null>(() =>
    plainDateCreate(2026, 1, 15),
  );
  const [iso, setIso] = useState<PlainDate | null>(() =>
    plainDateCreate(2026, 1, 15),
  );
  const [custom, setCustom] = useState<PlainDate | null>(() =>
    plainDateCreate(2026, 1, 15),
  );
  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
      <DateInput
        description="January 15, 2026"
        format="long"
        label="Long (default)"
        onChange={setLong}
        value={long}
      />
      <DateInput
        description="Jan 15, 2026"
        format="short"
        label="Short"
        onChange={setShort}
        value={short}
      />
      <DateInput
        description="2026-01-15"
        format="iso"
        label="ISO"
        onChange={setIso}
        value={iso}
      />
      <DateInput
        description="Any function of the selected date"
        format={date => `${date.month}/${date.day}/${date.year}`}
        label="Custom function"
        onChange={setCustom}
        value={custom}
      />
    </div>
  );
}

With Label Tooltip

Due date

The date by which this task should be completed.

Choose Due date

(args: DateInputProps) => {
  const [value, setValue] = useState<PlainDate | null>(() =>
    plainDateCreate(2026, 5, 21),
  );
  return <DateInput {...args} onChange={setValue} value={value} />;
}

Read Only

Due date

Choose Due date

<DateInput
  {...args}
  onChange={() => {}}
  value={plainDateCreate(2026, 5, 21)}
/>

API

DateInput

A date picker input that combines a text input with a calendar popover. Users can type a date directly or select one from the calendar.

When isOptional: false, isRequired: false

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the field root.
data-testid	string	—	Test ID applied to the input element.
description	ReactNode	—	Supporting text rendered below the label.
format	DateFormat	'long'	How the committed date is displayed. Accepts a named preset — 'long' ("January 15, 2026"), 'short' ("Jan 15, 2026"), or 'iso' ("2026-01-15") — or a function receiving the selected date. Typed input is always parsed with the same flexible rules regardless of this prop.
getIsDateDisabled	(date: PlainDate) => boolean	—	Returns true for dates that should be disabled.
hasClear	boolean	false	Whether to show a clear button when a value is selected.
htmlId	string	—	Custom HTML id applied to the input element.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label text.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
max	PlainDate	—	Maximum selectable date.
min	PlainDate	—	Minimum selectable date.
onChange*	(value: PlainDate | null) => void	—	Called when the selected date changes.
placeholder	string	'e.g. May 21, 2026'	Placeholder text shown when no date is selected. Typed dates accept a range of formats, including "May 21, 2026", "5/21/2026", and "2026-05-21".
ref	Ref<HTMLInputElement>	—	Ref forwarded to the input element.
size	"sm" | "md" | "lg"	'md'	Visual size of the input.
status	InputStatus	—	Validation status displayed below the input.
style	CSSProperties	—	Inline styles applied to the field root.
value*	PlainDate | null	—	Currently selected date. Pass null for an empty input.
isOptional	false	—
isRequired	false	—

When isOptional: true, isRequired: false

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the field root.
data-testid	string	—	Test ID applied to the input element.
description	ReactNode	—	Supporting text rendered below the label.
format	DateFormat	'long'	How the committed date is displayed. Accepts a named preset — 'long' ("January 15, 2026"), 'short' ("Jan 15, 2026"), or 'iso' ("2026-01-15") — or a function receiving the selected date. Typed input is always parsed with the same flexible rules regardless of this prop.
getIsDateDisabled	(date: PlainDate) => boolean	—	Returns true for dates that should be disabled.
hasClear	boolean	false	Whether to show a clear button when a value is selected.
htmlId	string	—	Custom HTML id applied to the input element.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label text.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
max	PlainDate	—	Maximum selectable date.
min	PlainDate	—	Minimum selectable date.
onChange*	(value: PlainDate | null) => void	—	Called when the selected date changes.
placeholder	string	'e.g. May 21, 2026'	Placeholder text shown when no date is selected. Typed dates accept a range of formats, including "May 21, 2026", "5/21/2026", and "2026-05-21".
ref	Ref<HTMLInputElement>	—	Ref forwarded to the input element.
size	"sm" | "md" | "lg"	'md'	Visual size of the input.
status	InputStatus	—	Validation status displayed below the input.
style	CSSProperties	—	Inline styles applied to the field root.
value*	PlainDate | null	—	Currently selected date. Pass null for an empty input.
isOptional*	true	—
isRequired	false	—

When isOptional: false, isRequired: true

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the field root.
data-testid	string	—	Test ID applied to the input element.
description	ReactNode	—	Supporting text rendered below the label.
format	DateFormat	'long'	How the committed date is displayed. Accepts a named preset — 'long' ("January 15, 2026"), 'short' ("Jan 15, 2026"), or 'iso' ("2026-01-15") — or a function receiving the selected date. Typed input is always parsed with the same flexible rules regardless of this prop.
getIsDateDisabled	(date: PlainDate) => boolean	—	Returns true for dates that should be disabled.
hasClear	boolean	false	Whether to show a clear button when a value is selected.
htmlId	string	—	Custom HTML id applied to the input element.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label text.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
max	PlainDate	—	Maximum selectable date.
min	PlainDate	—	Minimum selectable date.
onChange*	(value: PlainDate | null) => void	—	Called when the selected date changes.
placeholder	string	'e.g. May 21, 2026'	Placeholder text shown when no date is selected. Typed dates accept a range of formats, including "May 21, 2026", "5/21/2026", and "2026-05-21".
ref	Ref<HTMLInputElement>	—	Ref forwarded to the input element.
size	"sm" | "md" | "lg"	'md'	Visual size of the input.
status	InputStatus	—	Validation status displayed below the input.
style	CSSProperties	—	Inline styles applied to the field root.
value*	PlainDate | null	—	Currently selected date. Pass null for an empty input.
isOptional	false	—
isRequired*	true	—