DateField

Stripe DateField

An underline field that opens the kit calendar in a popover and reads “22 Oct 2026”. The value is a plain yyyy-MM-dd string; days outside min and max can't be picked. With a label it renders the whole field — label, description, red error — wired up for screen readers; without one, just the control for a Field of your own.

pnpm add @zikzuk/ui

import { DateField } from "@zikzuk/ui";

With limits, and with an error

Start date

The first day the limit applies.

Expiry

Pick a day after the start date

When to use

A single date in a form: a start date, an expiry.

Not for

Filtering a list by dates — DateRangeFilter.

Props

Prop	Type	Description
value / onChange	string / (value) => void	yyyy-MM-dd or "" (controlled).
defaultValue	string	Uncontrolled start.
label	ReactNode	Renders the whole field.
description	ReactNode	Grey help under the field.
error	ReactNode	Red, announced; marks it invalid.
min / max	string	Earliest and latest allowed day.
placeholder	string Default `"Pick a date"`	Shown when empty.
name	string	Submits the value with a native form.
disabled / invalid	boolean	States.
className	string	Extra classes on the outer element.