Date input

A text field that opens the browser's native date picker

Good for forms where you need a quick date entry without the weight of a full calendar. Use Date Picker instead when you want an always-visible inline calendar.

Default

Placeholder

With value

Required

Compact

Placeholder

With value

Required

States

Helper text

Select a date within the next 30 days

Error

Date must be in the future

Disabled

// From the npm package
import { DateInput } from 'rift-ds/components/DateInput/DateInput';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/date-input.json