Inputs and selection
Date picker
Available forNativeWeb
field trigger → Calendar in a Sheet
Usage
Input-shaped trigger that opens a Calendar in a Sheet.
API
<DatePicker value onChange placeholder? />Get it
Already in every copy of the native kit:
import { DatePicker } from '@/components/kit/date-picker';Details
- Exports
DatePicker- Packages
- lucide-react-native@^1.21.0
- Installs with
- @kit-native/calendar, @kit-native/icon, @kit-native/lib-utils, @kit-native/sheet, @kit-native/text
- Also searched as
- date, calendar field
- Registry JSON
- /r/native/date-picker.json
Usage
The placeholder says what the date is for (“Pick a due date”). Block days that cannot be chosen with disabled instead of erroring after.
API
<DatePicker id value onChange placeholder? disabled? />Get it
Already in every copy of the web kit:
import { DatePicker } from '@/components/kit/date-picker';Details
- Exports
DatePicker- Packages
- cn@^0.4.0, lucide-react@^1.52.0
- Installs with
- @kit/button, @kit/calendar, popover
- Also searched as
- date, calendar input, due date, deadline
- Registry JSON
- /r/web/date-picker.json
Agents: the whole registry is at /llms.txt.