DatePicker

Molecule

Native date input ile label + hint + error anatomy. Date | null değer modeli, min/max kısıtlaması, disabled tooltip desteği.

Preview

Appointment date

Select a future date.

Code

<DatePicker id="date" label="Appointment date" hint="Select a future date." value={date} onChange={setDate} />

Preview

Start date

Code

<DatePicker id="start" label="Start date" value={new Date('2026-06-15')} onChange={setDate} />

Preview

Due date

Please select a date.

Locked date

Code

<DatePicker id="due" label="Due date" error="Please select a date." required />
<DatePicker id="locked" label="Locked date" value={date} disabled />

Navigation