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

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

<DateInput {...args} onChange={setValue} value={value} />

Placeholder

Due date

Choose Due date

Previous month

July 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

Close popover

<DateInput {...args} onChange={setValue} value={value} />

With Constraints

Due date

Choose Due date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Clear Due date

<DateInput
  {...args}
  max={plainDateCreate(2026, 5, 28)}
  min={plainDateCreate(2026, 5, 10)}
  onChange={setValue}
  value={value}
/>

Disabled

Due date

Choose Due date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

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

Loading

Due date

Choose Due date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

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

With Description

Due dateChoose the date this task is due.

Choose Due date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

<DateInput {...args} onChange={setValue} value={value} />

Required

Due date · Required

Choose Due date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

<DateInput {...args} onChange={setValue} value={value} />

Optional

Due date · Optional

Choose Due date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

<DateInput {...args} onChange={setValue} value={value} />

Hidden Label

Due date

Choose Due date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

<DateInput {...args} onChange={setValue} value={value} />

Error Status

Due date

Choose Due date

Previous month

July 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

Close popover

Date is required

<DateInput {...args} onChange={setValue} value={value} />

Warning Status

Due date

Choose Due date

Previous month

January 2024

Next month

Su

Mo

Tu

We

Th

Fr

Sa

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

Close popover

Date is in the past

<DateInput {...args} onChange={setValue} value={value} />

Success Status

Due date

Choose Due date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Date is available

<DateInput {...args} onChange={setValue} value={value} />

Sizes

Small

Choose Small

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Medium

Choose Medium

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

Large

Choose Large

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

<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>

With Label Tooltip

Due date

The date by which this task should be completed.

Choose Due date

Previous month

May 2026

Next month

Su

Mo

Tu

We

Th

Fr

Sa

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

Close popover

<DateInput {...args} onChange={setValue} value={value} />

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.
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.
label*	string	—	Field label text.
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.
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.
label*	string	—	Field label text.
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.
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.
label*	string	—	Field label text.
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	—