shadcn.io is not affiliated with official shadcn/ui

Shadcn Date Input for React Radix UI

Segmented input for dates and times.

Radix UI does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

PreviewCode

mmddyyyy

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/date-input.json

Anatomy

DateInput
└── DateInputLabel
    ├── DateInputControl
    ├── DateInputSegmentGroup
    ├── DateInputSegment
    └── DateInputHiddenInput

Usage

import { DateInput } from "@/components/ui/date-input";

const Example = () => <DateInput className="w-full max-w-64" />;

Accessibility

Key	Description
`ArrowLeft`	Move left.
`ArrowRight`	Move right.
`ArrowUp`	Move up.
`ArrowDown`	Move down.
`PageUp`	Jump backward.
`PageDown`	Jump forward.
`Backspace`	Delete backward.
`Delete`	Delete backward.
`Home`	Go to the start.
`End`	Go to the end.

Demos

Context

PreviewCode

Controlled

PreviewCode

Custom Separator

PreviewCode

Default Value

PreviewCode

Disabled

PreviewCode

Granularity

PreviewCode

Invalid

PreviewCode

Leading Zeros

PreviewCode

Min Max

PreviewCode

Range

PreviewCode

Read Only

PreviewCode

Root Provider

PreviewCode

Size Lg

PreviewCode

Size Md

PreviewCode

Size Sm

PreviewCode

Time Only

PreviewCode

With Clear Button

PreviewCode

With Field

PreviewCode

API Reference

DateInput

div

PropType

selectionMode?"single" | "range"

separator?string | React.ReactNode

showClear?boolean

size?InputProps["size"]

asChild?boolean

className?string

AttributeType

data-slot"date-input"

data-scope"date-input"

data-part"root"

data-disabled?string

data-invalid?string

data-readonly?string

data-size?string

DateInputLabel

label

PropType

selectionMode?"single" | "range"

separator?string | React.ReactNode

showClear?boolean

size?InputProps["size"]

asChild?boolean

className?string

AttributeType

data-slot"date-input-label"

data-scope"date-input"

data-part"label"

DateInputControl

div

PropType

childrenReact.ReactNode

selectionMode?"single" | "range"

separator?string | React.ReactNode

showClear?boolean

size?InputProps["size"]

asChild?boolean

AttributeType

data-slot"date-input-control"

data-scope"date-input"

data-part"control"

data-disabled?string

data-focus?string

data-invalid?string

data-readonly?string

DateInputSegmentGroup

div

PropType

index?number

selectionMode?"single" | "range"

separator?string | React.ReactNode

showClear?boolean

size?InputProps["size"]

asChild?boolean

AttributeType

data-slot"date-input-segment-group"

data-scope"date-input"

data-part"segment-group"

DateInputSegment

span

PropType

segmentobject

selectionMode?"single" | "range"

separator?string | React.ReactNode

showClear?boolean

size?InputProps["size"]

asChild?boolean

AttributeType

data-slot"date-input-segment"

data-scope"date-input"

data-part"segment"

aria-disabledstring

aria-hiddenboolean

aria-invalidstring

aria-labelstring

aria-readonlystring

aria-valuemaxstring

aria-valueminstring

aria-valuenowstring

aria-valuetextstring

data-disabled""

data-editable?string

data-placeholder-shown?string

data-readonly""

data-typestring

data-valuestring

role"spinbutton"

DateInputHiddenInput

input

PropType

index?number

name?string

selectionMode?"single" | "range"

separator?string | React.ReactNode

showClear?boolean

size?InputProps["size"]

asChild?boolean

AttributeType

data-scope"date-input"

data-part"hidden-input"

DateInputRootProvider

div

PropType

valueReturnType<typeof useDateInput>

selectionMode?"single" | "range"

separator?string | React.ReactNode

showClear?boolean

size?InputProps["size"]

asChild?boolean

className?string

AttributeType

data-slot"date-input"

data-scope"date-input"

data-part"root"

data-disabled?string

data-invalid?string

data-readonly?string

data-size?string