# Date Input

URL: https://ark-ui.com/docs/components/date-input
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/date-input.mdx

A segment-based date input that allows users to enter dates by navigating individual date parts.

---

<ComponentPreview id="DateInput" />

## Anatomy

<Anatomy id="date-input" />

```tsx
<DateInput.Root>
  <DateInput.Label />
  <DateInput.Control>
    <DateInput.SegmentGroup>
      <DateInput.Segment />
    </DateInput.SegmentGroup>
  </DateInput.Control>
  <DateInput.HiddenInput />
</DateInput.Root>
```

## Examples

**Example: basic**

#### React

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import styles from 'styles/date-input.module.css'

export const Basic = () => (
  <DateInput.Root className={styles.Root}>
    <DateInput.Label className={styles.Label}>Date</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)

```

#### Solid

```tsx
import { DateInput } from '@ark-ui/solid/date-input'
import styles from 'styles/date-input.module.css'

export const Basic = () => (
  <DateInput.Root class={styles.Root}>
    <DateInput.Label class={styles.Label}>Date</DateInput.Label>
    <DateInput.Control class={styles.Control}>
      <DateInput.SegmentGroup class={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { DateInput } from '@ark-ui/vue/date-input'
import styles from 'styles/date-input.module.css'
</script>

<template>
  <DateInput.Root :class="styles.Root">
    <DateInput.Label :class="styles.Label">Date</DateInput.Label>
    <DateInput.Control :class="styles.Control">
      <DateInput.SegmentGroup :class="styles.SegmentGroup">
        <DateInput.SegmentContext v-slot="segment">
          <DateInput.Segment :class="styles.Segment" :segment="segment" />
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DateInput } from '@ark-ui/svelte/date-input'
  import styles from 'styles/date-input.module.css'
</script>

<DateInput.Root class={styles.Root}>
  <DateInput.Label class={styles.Label}>Date</DateInput.Label>
  <DateInput.Control class={styles.Control}>
    <DateInput.SegmentGroup class={styles.SegmentGroup}>
      <DateInput.SegmentContext>
        {#snippet render(segment)}
          <DateInput.Segment class={styles.Segment} {segment} />
        {/snippet}
      </DateInput.SegmentContext>
    </DateInput.SegmentGroup>
  </DateInput.Control>
  <DateInput.HiddenInput />
</DateInput.Root>

```

### Default Value

Use the `defaultValue` prop with `parseDate` to set the initial date value.

**Example: default-value**

#### React

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { parseDate } from '@internationalized/date'
import styles from 'styles/date-input.module.css'

export const DefaultValue = () => (
  <DateInput.Root className={styles.Root} defaultValue={[parseDate('2024-06-15')]}>
    <DateInput.Label className={styles.Label}>Date</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)

```

#### Solid

```tsx
import { DateInput } from '@ark-ui/solid/date-input'
import { parseDate } from '@internationalized/date'
import styles from 'styles/date-input.module.css'

export const DefaultValue = () => (
  <DateInput.Root class={styles.Root} defaultValue={[parseDate('2024-06-15')]}>
    <DateInput.Label class={styles.Label}>Date</DateInput.Label>
    <DateInput.Control class={styles.Control}>
      <DateInput.SegmentGroup class={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { DateInput } from '@ark-ui/vue/date-input'
import { parseDate } from '@internationalized/date'
import styles from 'styles/date-input.module.css'
</script>

<template>
  <DateInput.Root :default-value="[parseDate('2024-06-15')]" :class="styles.Root">
    <DateInput.Label :class="styles.Label">Date</DateInput.Label>
    <DateInput.Control :class="styles.Control">
      <DateInput.SegmentGroup :class="styles.SegmentGroup">
        <DateInput.SegmentContext v-slot="segment">
          <DateInput.Segment :class="styles.Segment" :segment="segment" />
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DateInput } from '@ark-ui/svelte/date-input'
  import { parseDate } from '@internationalized/date'
  import styles from 'styles/date-input.module.css'
</script>

<DateInput.Root class={styles.Root} defaultValue={[parseDate('2024-06-15')]}>
  <DateInput.Label class={styles.Label}>Date</DateInput.Label>
  <DateInput.Control class={styles.Control}>
    <DateInput.SegmentGroup class={styles.SegmentGroup}>
      <DateInput.SegmentContext>
        {#snippet render(segment)}
          <DateInput.Segment class={styles.Segment} {segment} />
        {/snippet}
      </DateInput.SegmentContext>
    </DateInput.SegmentGroup>
  </DateInput.Control>
  <DateInput.HiddenInput />
</DateInput.Root>

```

### Controlled

Use the `value` and `onValueChange` props to control the date input's value programmatically.

**Example: controlled**

#### React

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { parseDate, type DateValue } from '@internationalized/date'
import { useState } from 'react'
import styles from 'styles/date-input.module.css'

export const Controlled = () => {
  const [value, setValue] = useState<DateValue[]>([parseDate('2024-06-15')])

  return (
    <DateInput.Root className={styles.Root} value={value} onValueChange={(details) => setValue(details.value)}>
      <DateInput.Label className={styles.Label}>Date</DateInput.Label>
      <DateInput.Control className={styles.Control}>
        <DateInput.SegmentGroup className={styles.SegmentGroup}>
          <DateInput.SegmentContext>
            {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.Root>
  )
}

```

#### Solid

```tsx
import { DateInput } from '@ark-ui/solid/date-input'
import { parseDate, type DateValue } from '@internationalized/date'
import { createSignal } from 'solid-js'
import styles from 'styles/date-input.module.css'

export const Controlled = () => {
  const [value, setValue] = createSignal<DateValue[]>([parseDate('2024-06-15')])

  return (
    <DateInput.Root class={styles.Root} value={value()} onValueChange={(e) => setValue(e.value)}>
      <DateInput.Label class={styles.Label}>Date</DateInput.Label>
      <DateInput.Control class={styles.Control}>
        <DateInput.SegmentGroup class={styles.SegmentGroup}>
          <DateInput.SegmentContext>
            {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { DateInput } from '@ark-ui/vue/date-input'
import { parseDate, type DateValue } from '@internationalized/date'
import { type Ref, ref } from 'vue'
import styles from 'styles/date-input.module.css'

const value = ref([parseDate('2022-01-01')]) as Ref<DateValue[]>
</script>

<template>
  <DateInput.Root v-model="value" :class="styles.Root">
    <DateInput.Label :class="styles.Label">Date</DateInput.Label>
    <DateInput.Control :class="styles.Control">
      <DateInput.SegmentGroup :class="styles.SegmentGroup">
        <DateInput.SegmentContext v-slot="segment">
          <DateInput.Segment :class="styles.Segment" :segment="segment" />
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DateInput } from '@ark-ui/svelte/date-input'
  import { parseDate } from '@internationalized/date'
  import styles from 'styles/date-input.module.css'

  let value = $state([parseDate('2024-06-15')])
</script>

<DateInput.Root class={styles.Root} bind:value>
  <DateInput.Label class={styles.Label}>Date</DateInput.Label>
  <DateInput.Control class={styles.Control}>
    <DateInput.SegmentGroup class={styles.SegmentGroup}>
      <DateInput.SegmentContext>
        {#snippet render(segment)}
          <DateInput.Segment class={styles.Segment} {segment} />
        {/snippet}
      </DateInput.SegmentContext>
    </DateInput.SegmentGroup>
  </DateInput.Control>
  <DateInput.HiddenInput />
</DateInput.Root>

```

### Root Provider

An alternative way to control the date input is to use the `RootProvider` component and the `useDateInput` hook. This
way you can access the state and methods from outside the component.

**Example: root-provider**

#### React

```tsx
import { DateInput, useDateInput } from '@ark-ui/react/date-input'
import styles from 'styles/date-input.module.css'

export const RootProvider = () => {
  const dateInput = useDateInput()

  return (
    <DateInput.RootProvider className={styles.Root} value={dateInput}>
      <output>{dateInput.valueAsString.length > 0 ? dateInput.valueAsString : 'N/A'}</output>
      <DateInput.Label className={styles.Label}>Date</DateInput.Label>
      <DateInput.Control className={styles.Control}>
        <DateInput.SegmentGroup className={styles.SegmentGroup}>
          <DateInput.SegmentContext>
            {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.RootProvider>
  )
}

```

#### Solid

```tsx
import { DateInput, useDateInput } from '@ark-ui/solid/date-input'
import styles from 'styles/date-input.module.css'

export const RootProvider = () => {
  const dateInput = useDateInput()

  return (
    <DateInput.RootProvider class={styles.Root} value={dateInput}>
      <output>{dateInput().valueAsString.length > 0 ? dateInput().valueAsString : 'N/A'}</output>
      <DateInput.Label class={styles.Label}>Date</DateInput.Label>
      <DateInput.Control class={styles.Control}>
        <DateInput.SegmentGroup class={styles.SegmentGroup}>
          <DateInput.SegmentContext>
            {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.RootProvider>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { DateInput, useDateInput } from '@ark-ui/vue/date-input'
import styles from 'styles/date-input.module.css'

const dateInput = useDateInput()
</script>

<template>
  <DateInput.RootProvider :value="dateInput" :class="styles.Root">
    <output>{{ dateInput.valueAsString.length > 0 ? dateInput.valueAsString : 'N/A' }}</output>
    <DateInput.Label :class="styles.Label">Date</DateInput.Label>
    <DateInput.Control :class="styles.Control">
      <DateInput.SegmentGroup :class="styles.SegmentGroup">
        <DateInput.SegmentContext v-slot="segment">
          <DateInput.Segment :class="styles.Segment" :segment="segment" />
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.RootProvider>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DateInput, useDateInput } from '@ark-ui/svelte/date-input'
  import styles from 'styles/date-input.module.css'

  const id = $props.id()
  const dateInput = useDateInput({ id })
</script>

<DateInput.RootProvider value={dateInput} class={styles.Root}>
  <output>{dateInput().valueAsString.length > 0 ? dateInput().valueAsString : 'N/A'}</output>
  <DateInput.Label class={styles.Label}>Date</DateInput.Label>
  <DateInput.Control class={styles.Control}>
    <DateInput.SegmentGroup class={styles.SegmentGroup}>
      <DateInput.SegmentContext>
        {#snippet render(segment)}
          <DateInput.Segment class={styles.Segment} {segment} />
        {/snippet}
      </DateInput.SegmentContext>
    </DateInput.SegmentGroup>
  </DateInput.Control>
  <DateInput.HiddenInput />
</DateInput.RootProvider>

```

### Granularity

Use the `granularity` prop to control which date fields are displayed. Supported values are `day`, `hour`, `minute`, and
`second`.

**Example: granularity**

#### React

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import styles from 'styles/date-input.module.css'

export const Granularity = () => (
  <DateInput.Root className={styles.Root} granularity="second">
    <DateInput.Label className={styles.Label}>Date & Time</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)

```

#### Solid

```tsx
import { DateInput } from '@ark-ui/solid/date-input'
import styles from 'styles/date-input.module.css'

export const Granularity = () => (
  <DateInput.Root class={styles.Root} granularity="second">
    <DateInput.Label class={styles.Label}>Date & Time</DateInput.Label>
    <DateInput.Control class={styles.Control}>
      <DateInput.SegmentGroup class={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { DateInput } from '@ark-ui/vue/date-input'
import styles from 'styles/date-input.module.css'
</script>

<template>
  <DateInput.Root granularity="second" :class="styles.Root">
    <DateInput.Label :class="styles.Label">Date &amp; Time</DateInput.Label>
    <DateInput.Control :class="styles.Control">
      <DateInput.SegmentGroup :class="styles.SegmentGroup">
        <DateInput.SegmentContext v-slot="segment">
          <DateInput.Segment :class="styles.Segment" :segment="segment" />
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DateInput } from '@ark-ui/svelte/date-input'
  import styles from 'styles/date-input.module.css'
</script>

<DateInput.Root class={styles.Root} granularity="second">
  <DateInput.Label class={styles.Label}>Date & Time</DateInput.Label>
  <DateInput.Control class={styles.Control}>
    <DateInput.SegmentGroup class={styles.SegmentGroup}>
      <DateInput.SegmentContext>
        {#snippet render(segment)}
          <DateInput.Segment class={styles.Segment} {segment} />
        {/snippet}
      </DateInput.SegmentContext>
    </DateInput.SegmentGroup>
  </DateInput.Control>
  <DateInput.HiddenInput />
</DateInput.Root>

```

### Time Only

To create a time-only input, set `granularity` to `minute` (or `second`) and provide a `formatter` that only includes
time fields. Use the `hourCycle` prop to switch between 12 and 24 hour formats.

**Example: time-only**

#### React

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { DateFormatter } from '@internationalized/date'
import styles from 'styles/date-input.module.css'

const timeFormatter = new DateFormatter('en-US', {
  hour: '2-digit',
  minute: '2-digit',
  hourCycle: 'h23',
})

export const TimeOnly = () => (
  <DateInput.Root className={styles.Root} granularity="minute" hourCycle={24} formatter={timeFormatter}>
    <DateInput.Label className={styles.Label}>Time</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)

```

#### Solid

```tsx
import { DateInput } from '@ark-ui/solid/date-input'
import { DateFormatter } from '@internationalized/date'
import styles from 'styles/date-input.module.css'

const timeFormatter = new DateFormatter('en-US', {
  hour: '2-digit',
  minute: '2-digit',
  hourCycle: 'h23',
})

export const TimeOnly = () => (
  <DateInput.Root class={styles.Root} granularity="minute" hourCycle={24} formatter={timeFormatter}>
    <DateInput.Label class={styles.Label}>Time</DateInput.Label>
    <DateInput.Control class={styles.Control}>
      <DateInput.SegmentGroup class={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { DateInput } from '@ark-ui/vue/date-input'
import { DateFormatter } from '@internationalized/date'
import styles from 'styles/date-input.module.css'

const timeFormatter = new DateFormatter('en-US', {
  hour: '2-digit',
  minute: '2-digit',
  hourCycle: 'h23',
})
</script>

<template>
  <DateInput.Root :class="styles.Root" granularity="minute" :hour-cycle="24" :formatter="timeFormatter">
    <DateInput.Label :class="styles.Label">Time</DateInput.Label>
    <DateInput.Control :class="styles.Control">
      <DateInput.SegmentGroup :class="styles.SegmentGroup">
        <DateInput.SegmentContext v-slot="segment">
          <DateInput.Segment :class="styles.Segment" :segment="segment" />
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DateInput } from '@ark-ui/svelte/date-input'
  import { DateFormatter } from '@internationalized/date'
  import styles from 'styles/date-input.module.css'

  const timeFormatter = new DateFormatter('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    hourCycle: 'h23',
  })
</script>

<DateInput.Root class={styles.Root} granularity="minute" hourCycle={24} formatter={timeFormatter}>
  <DateInput.Label class={styles.Label}>Time</DateInput.Label>
  <DateInput.Control class={styles.Control}>
    <DateInput.SegmentGroup class={styles.SegmentGroup}>
      <DateInput.SegmentContext>
        {#snippet render(segment)}
          <DateInput.Segment class={styles.Segment} {segment} />
        {/snippet}
      </DateInput.SegmentContext>
    </DateInput.SegmentGroup>
  </DateInput.Control>
  <DateInput.HiddenInput />
</DateInput.Root>

```

### Range

To create a date input that allows a range selection, set the `selectionMode` prop to `range` and render two
`SegmentGroup` components with `index` props set to `0` and `1`.

**Example: range**

#### React

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import styles from 'styles/date-input.module.css'

export const Range = () => (
  <DateInput.Root className={styles.Root} selectionMode="range">
    <DateInput.Label className={styles.Label}>Date Range</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup index={0} className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
      <span>→</span>
      <DateInput.SegmentGroup index={1} className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput index={0} />
    <DateInput.HiddenInput index={1} />
  </DateInput.Root>
)

```

#### Solid

```tsx
import { DateInput } from '@ark-ui/solid/date-input'
import styles from 'styles/date-input.module.css'

export const Range = () => (
  <DateInput.Root class={styles.Root} selectionMode="range">
    <DateInput.Label class={styles.Label}>Date Range</DateInput.Label>
    <DateInput.Control class={styles.Control}>
      <DateInput.SegmentGroup index={0} class={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
      <span>→</span>
      <DateInput.SegmentGroup index={1} class={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput index={0} />
    <DateInput.HiddenInput index={1} />
  </DateInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { DateInput } from '@ark-ui/vue/date-input'
import styles from 'styles/date-input.module.css'
</script>

<template>
  <DateInput.Root selection-mode="range" :class="styles.Root">
    <DateInput.Label :class="styles.Label">Date Range</DateInput.Label>
    <DateInput.Control :class="styles.Control">
      <DateInput.SegmentGroup :index="0" :class="styles.SegmentGroup">
        <DateInput.SegmentContext v-slot="segment">
          <DateInput.Segment :class="styles.Segment" :segment="segment" />
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
      <span>→</span>
      <DateInput.SegmentGroup :index="1" :class="styles.SegmentGroup">
        <DateInput.SegmentContext v-slot="segment">
          <DateInput.Segment :class="styles.Segment" :segment="segment" />
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput :index="0" />
    <DateInput.HiddenInput :index="1" />
  </DateInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DateInput } from '@ark-ui/svelte/date-input'
  import styles from 'styles/date-input.module.css'
</script>

<DateInput.Root class={styles.Root} selectionMode="range">
  <DateInput.Label class={styles.Label}>Date Range</DateInput.Label>
  <DateInput.Control class={styles.Control}>
    <DateInput.SegmentGroup index={0} class={styles.SegmentGroup}>
      <DateInput.SegmentContext>
        {#snippet render(segment)}
          <DateInput.Segment class={styles.Segment} {segment} />
        {/snippet}
      </DateInput.SegmentContext>
    </DateInput.SegmentGroup>
    <span>→</span>
    <DateInput.SegmentGroup index={1} class={styles.SegmentGroup}>
      <DateInput.SegmentContext>
        {#snippet render(segment)}
          <DateInput.Segment class={styles.Segment} {segment} />
        {/snippet}
      </DateInput.SegmentContext>
    </DateInput.SegmentGroup>
  </DateInput.Control>
  <DateInput.HiddenInput index={0} />
  <DateInput.HiddenInput index={1} />
</DateInput.Root>

```

### Min and Max

Use the `min` and `max` props with `parseDate` to restrict the selectable date range. Dates outside this range will be
marked as invalid.

**Example: min-max**

#### React

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { parseDate } from '@internationalized/date'
import styles from 'styles/date-input.module.css'

export const MinMax = () => (
  <DateInput.Root className={styles.Root} min={parseDate('2024-01-01')} max={parseDate('2024-12-31')}>
    <DateInput.Label className={styles.Label}>Date (2024 only)</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)

```

#### Solid

```tsx
import { DateInput } from '@ark-ui/solid/date-input'
import { parseDate } from '@internationalized/date'
import styles from 'styles/date-input.module.css'

export const MinMax = () => (
  <DateInput.Root class={styles.Root} min={parseDate('2024-01-01')} max={parseDate('2024-12-31')}>
    <DateInput.Label class={styles.Label}>Date (2024 only)</DateInput.Label>
    <DateInput.Control class={styles.Control}>
      <DateInput.SegmentGroup class={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { DateInput } from '@ark-ui/vue/date-input'
import { parseDate } from '@internationalized/date'
import styles from 'styles/date-input.module.css'
</script>

<template>
  <DateInput.Root :min="parseDate('2024-01-01')" :max="parseDate('2024-12-31')" :class="styles.Root">
    <DateInput.Label :class="styles.Label">Date (2024 only)</DateInput.Label>
    <DateInput.Control :class="styles.Control">
      <DateInput.SegmentGroup :class="styles.SegmentGroup">
        <DateInput.SegmentContext v-slot="segment">
          <DateInput.Segment :class="styles.Segment" :segment="segment" />
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DateInput } from '@ark-ui/svelte/date-input'
  import { parseDate } from '@internationalized/date'
  import styles from 'styles/date-input.module.css'
</script>

<DateInput.Root class={styles.Root} min={parseDate('2024-01-01')} max={parseDate('2024-12-31')}>
  <DateInput.Label class={styles.Label}>Date (2024 only)</DateInput.Label>
  <DateInput.Control class={styles.Control}>
    <DateInput.SegmentGroup class={styles.SegmentGroup}>
      <DateInput.SegmentContext>
        {#snippet render(segment)}
          <DateInput.Segment class={styles.Segment} {segment} />
        {/snippet}
      </DateInput.SegmentContext>
    </DateInput.SegmentGroup>
  </DateInput.Control>
  <DateInput.HiddenInput />
</DateInput.Root>

```

### Disabled

Use the `disabled` prop to prevent user interaction with the date input.

**Example: disabled**

#### React

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { parseDate } from '@internationalized/date'
import styles from 'styles/date-input.module.css'

export const Disabled = () => (
  <DateInput.Root className={styles.Root} disabled defaultValue={[parseDate('2024-06-15')]}>
    <DateInput.Label className={styles.Label}>Date</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)

```

#### Solid

```tsx
import { DateInput } from '@ark-ui/solid/date-input'
import { parseDate } from '@internationalized/date'
import styles from 'styles/date-input.module.css'

export const Disabled = () => (
  <DateInput.Root class={styles.Root} disabled defaultValue={[parseDate('2024-06-15')]}>
    <DateInput.Label class={styles.Label}>Date</DateInput.Label>
    <DateInput.Control class={styles.Control}>
      <DateInput.SegmentGroup class={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { DateInput } from '@ark-ui/vue/date-input'
import { parseDate } from '@internationalized/date'
import styles from 'styles/date-input.module.css'
</script>

<template>
  <DateInput.Root disabled :default-value="[parseDate('2024-06-15')]" :class="styles.Root">
    <DateInput.Label :class="styles.Label">Date</DateInput.Label>
    <DateInput.Control :class="styles.Control">
      <DateInput.SegmentGroup :class="styles.SegmentGroup">
        <DateInput.SegmentContext v-slot="segment">
          <DateInput.Segment :class="styles.Segment" :segment="segment" />
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DateInput } from '@ark-ui/svelte/date-input'
  import { parseDate } from '@internationalized/date'
  import styles from 'styles/date-input.module.css'
</script>

<DateInput.Root class={styles.Root} disabled defaultValue={[parseDate('2024-06-15')]}>
  <DateInput.Label class={styles.Label}>Date</DateInput.Label>
  <DateInput.Control class={styles.Control}>
    <DateInput.SegmentGroup class={styles.SegmentGroup}>
      <DateInput.SegmentContext>
        {#snippet render(segment)}
          <DateInput.Segment class={styles.Segment} {segment} />
        {/snippet}
      </DateInput.SegmentContext>
    </DateInput.SegmentGroup>
  </DateInput.Control>
  <DateInput.HiddenInput />
</DateInput.Root>

```

### Read Only

Use the `readOnly` prop to make the date input non-editable while still being focusable.

**Example: read-only**

#### React

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { parseDate } from '@internationalized/date'
import styles from 'styles/date-input.module.css'

export const ReadOnly = () => (
  <DateInput.Root className={styles.Root} readOnly defaultValue={[parseDate('2024-06-15')]}>
    <DateInput.Label className={styles.Label}>Date</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)

```

#### Solid

```tsx
import { DateInput } from '@ark-ui/solid/date-input'
import { parseDate } from '@internationalized/date'
import styles from 'styles/date-input.module.css'

export const ReadOnly = () => (
  <DateInput.Root class={styles.Root} readOnly defaultValue={[parseDate('2024-06-15')]}>
    <DateInput.Label class={styles.Label}>Date</DateInput.Label>
    <DateInput.Control class={styles.Control}>
      <DateInput.SegmentGroup class={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { DateInput } from '@ark-ui/vue/date-input'
import { parseDate } from '@internationalized/date'
import styles from 'styles/date-input.module.css'
</script>

<template>
  <DateInput.Root read-only :default-value="[parseDate('2024-06-15')]" :class="styles.Root">
    <DateInput.Label :class="styles.Label">Date</DateInput.Label>
    <DateInput.Control :class="styles.Control">
      <DateInput.SegmentGroup :class="styles.SegmentGroup">
        <DateInput.SegmentContext v-slot="segment">
          <DateInput.Segment :class="styles.Segment" :segment="segment" />
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DateInput } from '@ark-ui/svelte/date-input'
  import { parseDate } from '@internationalized/date'
  import styles from 'styles/date-input.module.css'
</script>

<DateInput.Root class={styles.Root} readOnly defaultValue={[parseDate('2024-06-15')]}>
  <DateInput.Label class={styles.Label}>Date</DateInput.Label>
  <DateInput.Control class={styles.Control}>
    <DateInput.SegmentGroup class={styles.SegmentGroup}>
      <DateInput.SegmentContext>
        {#snippet render(segment)}
          <DateInput.Segment class={styles.Segment} {segment} />
        {/snippet}
      </DateInput.SegmentContext>
    </DateInput.SegmentGroup>
  </DateInput.Control>
  <DateInput.HiddenInput />
</DateInput.Root>

```

### Invalid

Use the `invalid` prop to indicate an error state on the date input.

**Example: invalid**

#### React

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import styles from 'styles/date-input.module.css'

export const Invalid = () => (
  <DateInput.Root className={styles.Root} invalid>
    <DateInput.Label className={styles.Label}>Date</DateInput.Label>
    <DateInput.Control className={styles.Control}>
      <DateInput.SegmentGroup className={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)

```

#### Solid

```tsx
import { DateInput } from '@ark-ui/solid/date-input'
import styles from 'styles/date-input.module.css'

export const Invalid = () => (
  <DateInput.Root class={styles.Root} invalid>
    <DateInput.Label class={styles.Label}>Date</DateInput.Label>
    <DateInput.Control class={styles.Control}>
      <DateInput.SegmentGroup class={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { DateInput } from '@ark-ui/vue/date-input'
import styles from 'styles/date-input.module.css'
</script>

<template>
  <DateInput.Root invalid :class="styles.Root">
    <DateInput.Label :class="styles.Label">Date</DateInput.Label>
    <DateInput.Control :class="styles.Control">
      <DateInput.SegmentGroup :class="styles.SegmentGroup">
        <DateInput.SegmentContext v-slot="segment">
          <DateInput.Segment :class="styles.Segment" :segment="segment" />
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DateInput } from '@ark-ui/svelte/date-input'
  import styles from 'styles/date-input.module.css'
</script>

<DateInput.Root class={styles.Root} invalid>
  <DateInput.Label class={styles.Label}>Date</DateInput.Label>
  <DateInput.Control class={styles.Control}>
    <DateInput.SegmentGroup class={styles.SegmentGroup}>
      <DateInput.SegmentContext>
        {#snippet render(segment)}
          <DateInput.Segment class={styles.Segment} {segment} />
        {/snippet}
      </DateInput.SegmentContext>
    </DateInput.SegmentGroup>
  </DateInput.Control>
  <DateInput.HiddenInput />
</DateInput.Root>

```

### Leading Zeros

Use the `shouldForceLeadingZeros` prop to toggle whether numeric segments are padded with a leading zero.

**Example: leading-zeros**

#### React

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { parseDate } from '@internationalized/date'
import { useState } from 'react'
import styles from 'styles/date-input.module.css'

export const LeadingZeros = () => {
  const [shouldForceLeadingZeros, setShouldForceLeadingZeros] = useState(true)

  return (
    <div className="stack">
      <label className={styles.CheckboxLabel}>
        <input
          className={styles.Checkbox}
          checked={shouldForceLeadingZeros}
          onChange={(event) => setShouldForceLeadingZeros(event.target.checked)}
          type="checkbox"
        />
        Force leading zeros
      </label>
      <DateInput.Root
        className={styles.Root}
        defaultValue={[parseDate('2024-06-05')]}
        shouldForceLeadingZeros={shouldForceLeadingZeros}
      >
        <DateInput.Label className={styles.Label}>Date</DateInput.Label>
        <DateInput.Control className={styles.Control}>
          <DateInput.SegmentGroup className={styles.SegmentGroup}>
            <DateInput.SegmentContext>
              {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
            </DateInput.SegmentContext>
          </DateInput.SegmentGroup>
        </DateInput.Control>
        <DateInput.HiddenInput />
      </DateInput.Root>
    </div>
  )
}

```

#### Solid

```tsx
import { DateInput } from '@ark-ui/solid/date-input'
import { parseDate } from '@internationalized/date'
import { createSignal } from 'solid-js'
import styles from 'styles/date-input.module.css'

export const LeadingZeros = () => {
  const [shouldForceLeadingZeros, setShouldForceLeadingZeros] = createSignal(true)

  return (
    <div class="stack">
      <label class={styles.CheckboxLabel}>
        <input
          class={styles.Checkbox}
          checked={shouldForceLeadingZeros()}
          onChange={(event) => setShouldForceLeadingZeros(event.currentTarget.checked)}
          type="checkbox"
        />
        Force leading zeros
      </label>
      <DateInput.Root
        class={styles.Root}
        defaultValue={[parseDate('2024-06-05')]}
        shouldForceLeadingZeros={shouldForceLeadingZeros()}
      >
        <DateInput.Label class={styles.Label}>Date</DateInput.Label>
        <DateInput.Control class={styles.Control}>
          <DateInput.SegmentGroup class={styles.SegmentGroup}>
            <DateInput.SegmentContext>
              {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
            </DateInput.SegmentContext>
          </DateInput.SegmentGroup>
        </DateInput.Control>
        <DateInput.HiddenInput />
      </DateInput.Root>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { DateInput } from '@ark-ui/vue/date-input'
import { parseDate } from '@internationalized/date'
import { ref } from 'vue'
import styles from 'styles/date-input.module.css'

const shouldForceLeadingZeros = ref(true)
</script>

<template>
  <div class="stack">
    <label :class="styles.CheckboxLabel">
      <input v-model="shouldForceLeadingZeros" :class="styles.Checkbox" type="checkbox" />
      Force leading zeros
    </label>
    <DateInput.Root
      :class="styles.Root"
      :default-value="[parseDate('2024-06-05')]"
      :should-force-leading-zeros="shouldForceLeadingZeros"
    >
      <DateInput.Label :class="styles.Label">Date</DateInput.Label>
      <DateInput.Control :class="styles.Control">
        <DateInput.SegmentGroup :class="styles.SegmentGroup">
          <DateInput.SegmentContext v-slot="segment">
            <DateInput.Segment :class="styles.Segment" :segment="segment" />
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.Root>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DateInput } from '@ark-ui/svelte/date-input'
  import { parseDate } from '@internationalized/date'
  import styles from 'styles/date-input.module.css'

  let shouldForceLeadingZeros = $state(true)
</script>

<div class="stack">
  <label class={styles.CheckboxLabel}>
    <input class={styles.Checkbox} bind:checked={shouldForceLeadingZeros} type="checkbox" />
    Force leading zeros
  </label>
  <DateInput.Root class={styles.Root} defaultValue={[parseDate('2024-06-05')]} {shouldForceLeadingZeros}>
    <DateInput.Label class={styles.Label}>Date</DateInput.Label>
    <DateInput.Control class={styles.Control}>
      <DateInput.SegmentGroup class={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {#snippet render(segment)}
            <DateInput.Segment class={styles.Segment} {segment} />
          {/snippet}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
</div>

```

### Localized

Use the `locale` prop to set the language and regional formatting of the date segments.

**Example: localized**

#### React

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { LocaleProvider } from '@ark-ui/react/locale'
import styles from 'styles/date-input.module.css'

export const Localized = () => (
  <LocaleProvider locale="fr-FR">
    <DateInput.Root className={styles.Root} granularity="minute" hourCycle={24}>
      <DateInput.Label className={styles.Label}>Date et heure</DateInput.Label>
      <DateInput.Control className={styles.Control}>
        <DateInput.SegmentGroup className={styles.SegmentGroup}>
          <DateInput.SegmentContext>
            {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.Root>
  </LocaleProvider>
)

```

#### Solid

```tsx
import { DateInput } from '@ark-ui/solid/date-input'
import { LocaleProvider } from '@ark-ui/solid/locale'
import styles from 'styles/date-input.module.css'

export const Localized = () => (
  <LocaleProvider locale="fr-FR">
    <DateInput.Root class={styles.Root} granularity="minute" hourCycle={24}>
      <DateInput.Label class={styles.Label}>Date et heure</DateInput.Label>
      <DateInput.Control class={styles.Control}>
        <DateInput.SegmentGroup class={styles.SegmentGroup}>
          <DateInput.SegmentContext>
            {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.Root>
  </LocaleProvider>
)

```

#### Vue

```vue
<script setup lang="ts">
import { DateInput } from '@ark-ui/vue/date-input'
import { LocaleProvider } from '@ark-ui/vue/locale'
import styles from 'styles/date-input.module.css'
</script>

<template>
  <LocaleProvider locale="fr-FR">
    <DateInput.Root granularity="minute" :hour-cycle="24" :class="styles.Root">
      <DateInput.Label :class="styles.Label">Date et heure</DateInput.Label>
      <DateInput.Control :class="styles.Control">
        <DateInput.SegmentGroup :class="styles.SegmentGroup">
          <DateInput.SegmentContext v-slot="segment">
            <DateInput.Segment :class="styles.Segment" :segment="segment" />
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.Root>
  </LocaleProvider>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DateInput } from '@ark-ui/svelte/date-input'
  import { LocaleProvider } from '@ark-ui/svelte/locale'
  import styles from 'styles/date-input.module.css'
</script>

<LocaleProvider locale="fr-FR">
  <DateInput.Root class={styles.Root} granularity="minute" hourCycle={24}>
    <DateInput.Label class={styles.Label}>Date et heure</DateInput.Label>
    <DateInput.Control class={styles.Control}>
      <DateInput.SegmentGroup class={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {#snippet render(segment)}
            <DateInput.Segment class={styles.Segment} {segment} />
          {/snippet}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
</LocaleProvider>

```

### RTL

Set the `dir` prop to `rtl` for right-to-left language support.

**Example: rtl**

#### React

```tsx
import { DateInput } from '@ark-ui/react/date-input'
import { LocaleProvider } from '@ark-ui/react/locale'
import styles from 'styles/date-input.module.css'

export const RTL = () => (
  <LocaleProvider locale="ar-SA">
    <DateInput.Root className={styles.Root} dir="rtl">
      <DateInput.Label className={styles.Label}>التاريخ</DateInput.Label>
      <DateInput.Control className={styles.Control}>
        <DateInput.SegmentGroup className={styles.SegmentGroup}>
          <DateInput.SegmentContext>
            {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.Root>
  </LocaleProvider>
)

```

#### Solid

```tsx
import { DateInput } from '@ark-ui/solid/date-input'
import { LocaleProvider } from '@ark-ui/solid/locale'
import styles from 'styles/date-input.module.css'

export const RTL = () => (
  <LocaleProvider locale="ar-SA">
    <DateInput.Root class={styles.Root} dir="rtl">
      <DateInput.Label class={styles.Label}>التاريخ</DateInput.Label>
      <DateInput.Control class={styles.Control}>
        <DateInput.SegmentGroup class={styles.SegmentGroup}>
          <DateInput.SegmentContext>
            {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.Root>
  </LocaleProvider>
)

```

#### Vue

```vue
<script setup lang="ts">
import { DateInput } from '@ark-ui/vue/date-input'
import { LocaleProvider } from '@ark-ui/vue/locale'
import styles from 'styles/date-input.module.css'
</script>

<template>
  <LocaleProvider locale="ar-SA">
    <DateInput.Root dir="rtl" :class="styles.Root">
      <DateInput.Label :class="styles.Label">التاريخ</DateInput.Label>
      <DateInput.Control :class="styles.Control">
        <DateInput.SegmentGroup :class="styles.SegmentGroup">
          <DateInput.SegmentContext v-slot="segment">
            <DateInput.Segment :class="styles.Segment" :segment="segment" />
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.Root>
  </LocaleProvider>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DateInput } from '@ark-ui/svelte/date-input'
  import { LocaleProvider } from '@ark-ui/svelte/locale'
  import styles from 'styles/date-input.module.css'
</script>

<LocaleProvider locale="ar-SA">
  <DateInput.Root class={styles.Root} dir="rtl">
    <DateInput.Label class={styles.Label}>التاريخ</DateInput.Label>
    <DateInput.Control class={styles.Control}>
      <DateInput.SegmentGroup class={styles.SegmentGroup}>
        <DateInput.SegmentContext>
          {#snippet render(segment)}
            <DateInput.Segment class={styles.Segment} {segment} />
          {/snippet}
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>
</LocaleProvider>

```

### With Clear Button

Use `useDateInput` via `RootProvider` to access the `clearValue` method and render a clear button alongside the input.

**Example: with-clear-button**

#### React

```tsx
import { DateInput, useDateInput } from '@ark-ui/react/date-input'
import { XIcon } from 'lucide-react'
import button from 'styles/button.module.css'
import styles from 'styles/date-input.module.css'

export const WithClearButton = () => {
  const dateInput = useDateInput()

  return (
    <DateInput.RootProvider className={styles.Root} value={dateInput}>
      <DateInput.Label className={styles.Label}>Date</DateInput.Label>
      <DateInput.Control className={styles.Control}>
        <DateInput.SegmentGroup className={styles.SegmentGroup}>
          <DateInput.SegmentContext>
            {(segment) => <DateInput.Segment className={styles.Segment} segment={segment} />}
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
        <button aria-label="Clear date" className={button.Root} type="button" onClick={() => dateInput.clearValue()}>
          <XIcon />
        </button>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.RootProvider>
  )
}

```

#### Solid

```tsx
import { DateInput, useDateInput } from '@ark-ui/solid/date-input'
import { XIcon } from 'lucide-solid'
import button from 'styles/button.module.css'
import styles from 'styles/date-input.module.css'

export const WithClearButton = () => {
  const dateInput = useDateInput()

  return (
    <DateInput.RootProvider class={styles.Root} value={dateInput}>
      <DateInput.Label class={styles.Label}>Date</DateInput.Label>
      <DateInput.Control class={styles.Control}>
        <DateInput.SegmentGroup class={styles.SegmentGroup}>
          <DateInput.SegmentContext>
            {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
        <button aria-label="Clear date" class={button.Root} type="button" onClick={() => dateInput().clearValue()}>
          <XIcon />
        </button>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.RootProvider>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { DateInput, useDateInput } from '@ark-ui/vue/date-input'
import { XIcon } from 'lucide-vue-next'
import button from 'styles/button.module.css'
import styles from 'styles/date-input.module.css'

const dateInput = useDateInput()
</script>

<template>
  <DateInput.RootProvider :value="dateInput" :class="styles.Root">
    <DateInput.Label :class="styles.Label">Date</DateInput.Label>
    <DateInput.Control :class="styles.Control">
      <DateInput.SegmentGroup :class="styles.SegmentGroup">
        <DateInput.SegmentContext v-slot="segment">
          <DateInput.Segment :class="styles.Segment" :segment="segment" />
        </DateInput.SegmentContext>
      </DateInput.SegmentGroup>
      <button aria-label="Clear date" :class="button.Root" type="button" @click="dateInput.clearValue()">
        <XIcon />
      </button>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.RootProvider>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DateInput, useDateInput } from '@ark-ui/svelte/date-input'
  import { XIcon } from 'lucide-svelte'
  import button from 'styles/button.module.css'
  import styles from 'styles/date-input.module.css'

  const id = $props.id()
  const dateInput = useDateInput({ id })
</script>

<DateInput.RootProvider value={dateInput} class={styles.Root}>
  <DateInput.Label class={styles.Label}>Date</DateInput.Label>
  <DateInput.Control class={styles.Control}>
    <DateInput.SegmentGroup class={styles.SegmentGroup}>
      <DateInput.SegmentContext>
        {#snippet render(segment)}
          <DateInput.Segment class={styles.Segment} {segment} />
        {/snippet}
      </DateInput.SegmentContext>
    </DateInput.SegmentGroup>
    <button aria-label="Clear date" class={button.Root} type="button" onclick={() => dateInput().clearValue()}>
      <XIcon />
    </button>
  </DateInput.Control>
  <DateInput.HiddenInput />
</DateInput.RootProvider>

```

### With Date Picker

Combine `DateInput` with `DatePicker` by syncing their values using `onValueChange` to provide both typed and
calendar-based date selection.

**Example: with-date-picker**

#### React

```tsx
import { DateInput, useDateInput } from '@ark-ui/react/date-input'
import { DatePicker, useDatePicker } from '@ark-ui/react/date-picker'
import { Portal } from '@ark-ui/react/portal'
import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
import styles from 'styles/date-input.module.css'
import datePickerStyles from 'styles/date-picker.module.css'

export const WithDatePicker = () => {
  const datePicker = useDatePicker()
  const dateInput = useDateInput({
    value: datePicker.value,
    onValueChange(details) {
      datePicker.setValue(details.value)
    },
  })

  return (
    <DateInput.RootProvider className={styles.Root} value={dateInput}>
      <DateInput.Label className={styles.Label}>Date</DateInput.Label>
      <DateInput.Control className={styles.Control}>
        <DatePicker.RootProvider className={datePickerStyles.Root} value={datePicker}>
          <DatePicker.Control className={datePickerStyles.Control}>
            <DateInput.SegmentGroup className={styles.SegmentGroup}>
              <DateInput.Context>
                {(dateInput) =>
                  dateInput
                    .getSegments()
                    .map((segment, index) => (
                      <DateInput.Segment
                        className={styles.Segment}
                        key={`${segment.type}-${index}`}
                        segment={segment}
                      />
                    ))
                }
              </DateInput.Context>
            </DateInput.SegmentGroup>
            <DatePicker.Trigger className={datePickerStyles.Trigger}>
              <CalendarIcon />
            </DatePicker.Trigger>
          </DatePicker.Control>
          <Portal>
            <DatePicker.Positioner>
              <DatePicker.Content className={datePickerStyles.Content}>
                <DatePicker.View view="day" className={datePickerStyles.View}>
                  <DatePicker.Context>
                    {(datePicker) => (
                      <>
                        <DatePicker.ViewControl className={datePickerStyles.ViewControl}>
                          <DatePicker.PrevTrigger className={datePickerStyles.PrevTrigger}>
                            <ChevronLeftIcon />
                          </DatePicker.PrevTrigger>
                          <DatePicker.ViewTrigger className={datePickerStyles.ViewTrigger}>
                            <DatePicker.RangeText />
                          </DatePicker.ViewTrigger>
                          <DatePicker.NextTrigger className={datePickerStyles.NextTrigger}>
                            <ChevronRightIcon />
                          </DatePicker.NextTrigger>
                        </DatePicker.ViewControl>
                        <DatePicker.Table className={datePickerStyles.Table}>
                          <DatePicker.TableHead className={datePickerStyles.TableHead}>
                            <DatePicker.TableRow className={datePickerStyles.TableRow}>
                              {datePicker.weekDays.map((weekDay, id) => (
                                <DatePicker.TableHeader className={datePickerStyles.TableHeader} key={id}>
                                  {weekDay.short}
                                </DatePicker.TableHeader>
                              ))}
                            </DatePicker.TableRow>
                          </DatePicker.TableHead>
                          <DatePicker.TableBody className={datePickerStyles.TableBody}>
                            {datePicker.weeks.map((week, id) => (
                              <DatePicker.TableRow className={datePickerStyles.TableRow} key={id}>
                                {week.map((day, id) => (
                                  <DatePicker.TableCell className={datePickerStyles.TableCell} key={id} value={day}>
                                    <DatePicker.TableCellTrigger className={datePickerStyles.TableCellTrigger}>
                                      {day.day}
                                    </DatePicker.TableCellTrigger>
                                  </DatePicker.TableCell>
                                ))}
                              </DatePicker.TableRow>
                            ))}
                          </DatePicker.TableBody>
                        </DatePicker.Table>
                      </>
                    )}
                  </DatePicker.Context>
                </DatePicker.View>
                <DatePicker.View view="month" className={datePickerStyles.View}>
                  <DatePicker.Context>
                    {(datePicker) => (
                      <>
                        <DatePicker.ViewControl className={datePickerStyles.ViewControl}>
                          <DatePicker.PrevTrigger className={datePickerStyles.PrevTrigger}>
                            <ChevronLeftIcon />
                          </DatePicker.PrevTrigger>
                          <DatePicker.ViewTrigger className={datePickerStyles.ViewTrigger}>
                            <DatePicker.RangeText />
                          </DatePicker.ViewTrigger>
                          <DatePicker.NextTrigger className={datePickerStyles.NextTrigger}>
                            <ChevronRightIcon />
                          </DatePicker.NextTrigger>
                        </DatePicker.ViewControl>
                        <DatePicker.Table className={datePickerStyles.Table}>
                          <DatePicker.TableBody className={datePickerStyles.TableBody}>
                            {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
                              <DatePicker.TableRow className={datePickerStyles.TableRow} key={id}>
                                {months.map((month, id) => (
                                  <DatePicker.TableCell
                                    className={datePickerStyles.TableCell}
                                    key={id}
                                    value={month.value}
                                  >
                                    <DatePicker.TableCellTrigger className={datePickerStyles.TableCellTrigger}>
                                      {month.label}
                                    </DatePicker.TableCellTrigger>
                                  </DatePicker.TableCell>
                                ))}
                              </DatePicker.TableRow>
                            ))}
                          </DatePicker.TableBody>
                        </DatePicker.Table>
                      </>
                    )}
                  </DatePicker.Context>
                </DatePicker.View>
                <DatePicker.View view="year" className={datePickerStyles.View}>
                  <DatePicker.Context>
                    {(datePicker) => (
                      <>
                        <DatePicker.ViewControl className={datePickerStyles.ViewControl}>
                          <DatePicker.PrevTrigger className={datePickerStyles.PrevTrigger}>
                            <ChevronLeftIcon />
                          </DatePicker.PrevTrigger>
                          <DatePicker.ViewTrigger className={datePickerStyles.ViewTrigger}>
                            <DatePicker.RangeText />
                          </DatePicker.ViewTrigger>
                          <DatePicker.NextTrigger className={datePickerStyles.NextTrigger}>
                            <ChevronRightIcon />
                          </DatePicker.NextTrigger>
                        </DatePicker.ViewControl>
                        <DatePicker.Table className={datePickerStyles.Table}>
                          <DatePicker.TableBody className={datePickerStyles.TableBody}>
                            {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
                              <DatePicker.TableRow className={datePickerStyles.TableRow} key={id}>
                                {years.map((year, id) => (
                                  <DatePicker.TableCell
                                    className={datePickerStyles.TableCell}
                                    key={id}
                                    value={year.value}
                                  >
                                    <DatePicker.TableCellTrigger className={datePickerStyles.TableCellTrigger}>
                                      {year.label}
                                    </DatePicker.TableCellTrigger>
                                  </DatePicker.TableCell>
                                ))}
                              </DatePicker.TableRow>
                            ))}
                          </DatePicker.TableBody>
                        </DatePicker.Table>
                      </>
                    )}
                  </DatePicker.Context>
                </DatePicker.View>
              </DatePicker.Content>
            </DatePicker.Positioner>
          </Portal>
        </DatePicker.RootProvider>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.RootProvider>
  )
}

```

#### Solid

```tsx
import { DateInput, useDateInput } from '@ark-ui/solid/date-input'
import { DatePicker, useDatePicker } from '@ark-ui/solid/date-picker'
import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import { Portal } from 'solid-js/web'
import styles from 'styles/date-input.module.css'
import datePickerStyles from 'styles/date-picker.module.css'

export const WithDatePicker = () => {
  const datePicker = useDatePicker()
  const dateInput = useDateInput(() => ({
    value: datePicker().value,
    onValueChange(details) {
      datePicker().setValue(details.value)
    },
  }))

  return (
    <DateInput.RootProvider class={styles.Root} value={dateInput}>
      <DateInput.Label class={styles.Label}>Date</DateInput.Label>
      <DateInput.Control class={styles.Control}>
        <DatePicker.RootProvider class={datePickerStyles.Root} value={datePicker}>
          <DatePicker.Control class={datePickerStyles.Control}>
            <DateInput.SegmentGroup class={styles.SegmentGroup}>
              <DateInput.SegmentContext>
                {(segment) => <DateInput.Segment class={styles.Segment} segment={segment} />}
              </DateInput.SegmentContext>
            </DateInput.SegmentGroup>
            <DatePicker.Trigger class={datePickerStyles.Trigger}>
              <CalendarIcon />
            </DatePicker.Trigger>
          </DatePicker.Control>
          <Portal>
            <DatePicker.Positioner>
              <DatePicker.Content class={datePickerStyles.Content}>
                <DatePicker.View view="day" class={datePickerStyles.View}>
                  <DatePicker.Context>
                    {(datePicker) => (
                      <>
                        <DatePicker.ViewControl class={datePickerStyles.ViewControl}>
                          <DatePicker.PrevTrigger class={datePickerStyles.PrevTrigger}>
                            <ChevronLeftIcon />
                          </DatePicker.PrevTrigger>
                          <DatePicker.ViewTrigger class={datePickerStyles.ViewTrigger}>
                            <DatePicker.RangeText />
                          </DatePicker.ViewTrigger>
                          <DatePicker.NextTrigger class={datePickerStyles.NextTrigger}>
                            <ChevronRightIcon />
                          </DatePicker.NextTrigger>
                        </DatePicker.ViewControl>
                        <DatePicker.Table class={datePickerStyles.Table}>
                          <DatePicker.TableHead class={datePickerStyles.TableHead}>
                            <DatePicker.TableRow class={datePickerStyles.TableRow}>
                              <Index each={datePicker().weekDays}>
                                {(weekDay) => (
                                  <DatePicker.TableHeader class={datePickerStyles.TableHeader}>
                                    {weekDay().short}
                                  </DatePicker.TableHeader>
                                )}
                              </Index>
                            </DatePicker.TableRow>
                          </DatePicker.TableHead>
                          <DatePicker.TableBody class={datePickerStyles.TableBody}>
                            <Index each={datePicker().weeks}>
                              {(week) => (
                                <DatePicker.TableRow class={datePickerStyles.TableRow}>
                                  <Index each={week()}>
                                    {(day) => (
                                      <DatePicker.TableCell class={datePickerStyles.TableCell} value={day()}>
                                        <DatePicker.TableCellTrigger class={datePickerStyles.TableCellTrigger}>
                                          {day().day}
                                        </DatePicker.TableCellTrigger>
                                      </DatePicker.TableCell>
                                    )}
                                  </Index>
                                </DatePicker.TableRow>
                              )}
                            </Index>
                          </DatePicker.TableBody>
                        </DatePicker.Table>
                      </>
                    )}
                  </DatePicker.Context>
                </DatePicker.View>
                <DatePicker.View view="month" class={datePickerStyles.View}>
                  <DatePicker.Context>
                    {(datePicker) => (
                      <>
                        <DatePicker.ViewControl class={datePickerStyles.ViewControl}>
                          <DatePicker.PrevTrigger class={datePickerStyles.PrevTrigger}>
                            <ChevronLeftIcon />
                          </DatePicker.PrevTrigger>
                          <DatePicker.ViewTrigger class={datePickerStyles.ViewTrigger}>
                            <DatePicker.RangeText />
                          </DatePicker.ViewTrigger>
                          <DatePicker.NextTrigger class={datePickerStyles.NextTrigger}>
                            <ChevronRightIcon />
                          </DatePicker.NextTrigger>
                        </DatePicker.ViewControl>
                        <DatePicker.Table class={datePickerStyles.Table}>
                          <DatePicker.TableBody class={datePickerStyles.TableBody}>
                            <Index each={datePicker().getMonthsGrid({ columns: 4, format: 'short' })}>
                              {(months) => (
                                <DatePicker.TableRow class={datePickerStyles.TableRow}>
                                  <Index each={months()}>
                                    {(month) => (
                                      <DatePicker.TableCell class={datePickerStyles.TableCell} value={month().value}>
                                        <DatePicker.TableCellTrigger class={datePickerStyles.TableCellTrigger}>
                                          {month().label}
                                        </DatePicker.TableCellTrigger>
                                      </DatePicker.TableCell>
                                    )}
                                  </Index>
                                </DatePicker.TableRow>
                              )}
                            </Index>
                          </DatePicker.TableBody>
                        </DatePicker.Table>
                      </>
                    )}
                  </DatePicker.Context>
                </DatePicker.View>
                <DatePicker.View view="year" class={datePickerStyles.View}>
                  <DatePicker.Context>
                    {(datePicker) => (
                      <>
                        <DatePicker.ViewControl class={datePickerStyles.ViewControl}>
                          <DatePicker.PrevTrigger class={datePickerStyles.PrevTrigger}>
                            <ChevronLeftIcon />
                          </DatePicker.PrevTrigger>
                          <DatePicker.ViewTrigger class={datePickerStyles.ViewTrigger}>
                            <DatePicker.RangeText />
                          </DatePicker.ViewTrigger>
                          <DatePicker.NextTrigger class={datePickerStyles.NextTrigger}>
                            <ChevronRightIcon />
                          </DatePicker.NextTrigger>
                        </DatePicker.ViewControl>
                        <DatePicker.Table class={datePickerStyles.Table}>
                          <DatePicker.TableBody class={datePickerStyles.TableBody}>
                            <Index each={datePicker().getYearsGrid({ columns: 4 })}>
                              {(years) => (
                                <DatePicker.TableRow class={datePickerStyles.TableRow}>
                                  <Index each={years()}>
                                    {(year) => (
                                      <DatePicker.TableCell class={datePickerStyles.TableCell} value={year().value}>
                                        <DatePicker.TableCellTrigger class={datePickerStyles.TableCellTrigger}>
                                          {year().label}
                                        </DatePicker.TableCellTrigger>
                                      </DatePicker.TableCell>
                                    )}
                                  </Index>
                                </DatePicker.TableRow>
                              )}
                            </Index>
                          </DatePicker.TableBody>
                        </DatePicker.Table>
                      </>
                    )}
                  </DatePicker.Context>
                </DatePicker.View>
              </DatePicker.Content>
            </DatePicker.Positioner>
          </Portal>
        </DatePicker.RootProvider>
      </DateInput.Control>
      <DateInput.HiddenInput />
    </DateInput.RootProvider>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { DateInput, useDateInput } from '@ark-ui/vue/date-input'
import { DatePicker, useDatePicker } from '@ark-ui/vue/date-picker'
import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-vue-next'
import { computed } from 'vue'
import styles from 'styles/date-input.module.css'
import datePickerStyles from 'styles/date-picker.module.css'

const datePicker = useDatePicker()
const dateInput = useDateInput(
  computed(() => ({
    value: datePicker.value.value,
    onValueChange(details) {
      datePicker.value.setValue(details.value)
    },
  })),
)
</script>

<template>
  <DateInput.RootProvider :value="dateInput" :class="styles.Root">
    <DateInput.Label :class="styles.Label">Date</DateInput.Label>
    <DateInput.Control :class="styles.Control">
      <DatePicker.RootProvider :value="datePicker" :class="datePickerStyles.Root">
        <DatePicker.Control :class="datePickerStyles.Control">
          <DateInput.SegmentGroup :class="styles.SegmentGroup">
            <DateInput.SegmentContext v-slot="segment">
              <DateInput.Segment :class="styles.Segment" :segment="segment" />
            </DateInput.SegmentContext>
          </DateInput.SegmentGroup>
          <DatePicker.Trigger :class="datePickerStyles.Trigger">
            <CalendarIcon />
          </DatePicker.Trigger>
        </DatePicker.Control>
        <DatePicker.Positioner>
          <DatePicker.Content :class="datePickerStyles.Content">
            <DatePicker.View view="day" :class="datePickerStyles.View">
              <DatePicker.Context v-slot="api">
                <DatePicker.ViewControl :class="datePickerStyles.ViewControl">
                  <DatePicker.PrevTrigger :class="datePickerStyles.PrevTrigger">
                    <ChevronLeftIcon />
                  </DatePicker.PrevTrigger>
                  <DatePicker.ViewTrigger :class="datePickerStyles.ViewTrigger">
                    <DatePicker.RangeText />
                  </DatePicker.ViewTrigger>
                  <DatePicker.NextTrigger :class="datePickerStyles.NextTrigger">
                    <ChevronRightIcon />
                  </DatePicker.NextTrigger>
                </DatePicker.ViewControl>
                <DatePicker.Table :class="datePickerStyles.Table">
                  <DatePicker.TableHead :class="datePickerStyles.TableHead">
                    <DatePicker.TableRow :class="datePickerStyles.TableRow">
                      <DatePicker.TableHeader
                        v-for="(weekDay, id) in api.weekDays"
                        :key="id"
                        :class="datePickerStyles.TableHeader"
                      >
                        {{ weekDay.short }}
                      </DatePicker.TableHeader>
                    </DatePicker.TableRow>
                  </DatePicker.TableHead>
                  <DatePicker.TableBody :class="datePickerStyles.TableBody">
                    <DatePicker.TableRow v-for="(week, id) in api.weeks" :key="id" :class="datePickerStyles.TableRow">
                      <DatePicker.TableCell
                        v-for="(day, id) in week"
                        :key="id"
                        :value="day"
                        :class="datePickerStyles.TableCell"
                      >
                        <DatePicker.TableCellTrigger :class="datePickerStyles.TableCellTrigger">
                          {{ day.day }}
                        </DatePicker.TableCellTrigger>
                      </DatePicker.TableCell>
                    </DatePicker.TableRow>
                  </DatePicker.TableBody>
                </DatePicker.Table>
              </DatePicker.Context>
            </DatePicker.View>
            <DatePicker.View view="month" :class="datePickerStyles.View">
              <DatePicker.Context v-slot="api">
                <DatePicker.ViewControl :class="datePickerStyles.ViewControl">
                  <DatePicker.PrevTrigger :class="datePickerStyles.PrevTrigger">
                    <ChevronLeftIcon />
                  </DatePicker.PrevTrigger>
                  <DatePicker.ViewTrigger :class="datePickerStyles.ViewTrigger">
                    <DatePicker.RangeText />
                  </DatePicker.ViewTrigger>
                  <DatePicker.NextTrigger :class="datePickerStyles.NextTrigger">
                    <ChevronRightIcon />
                  </DatePicker.NextTrigger>
                </DatePicker.ViewControl>
                <DatePicker.Table :class="datePickerStyles.Table">
                  <DatePicker.TableBody :class="datePickerStyles.TableBody">
                    <DatePicker.TableRow
                      v-for="(months, id) in api.getMonthsGrid({ columns: 4, format: 'short' })"
                      :key="id"
                      :class="datePickerStyles.TableRow"
                    >
                      <DatePicker.TableCell
                        v-for="(month, id) in months"
                        :key="id"
                        :value="month.value"
                        :class="datePickerStyles.TableCell"
                      >
                        <DatePicker.TableCellTrigger :class="datePickerStyles.TableCellTrigger">
                          {{ month.label }}
                        </DatePicker.TableCellTrigger>
                      </DatePicker.TableCell>
                    </DatePicker.TableRow>
                  </DatePicker.TableBody>
                </DatePicker.Table>
              </DatePicker.Context>
            </DatePicker.View>
            <DatePicker.View view="year" :class="datePickerStyles.View">
              <DatePicker.Context v-slot="api">
                <DatePicker.ViewControl :class="datePickerStyles.ViewControl">
                  <DatePicker.PrevTrigger :class="datePickerStyles.PrevTrigger">
                    <ChevronLeftIcon />
                  </DatePicker.PrevTrigger>
                  <DatePicker.ViewTrigger :class="datePickerStyles.ViewTrigger">
                    <DatePicker.RangeText />
                  </DatePicker.ViewTrigger>
                  <DatePicker.NextTrigger :class="datePickerStyles.NextTrigger">
                    <ChevronRightIcon />
                  </DatePicker.NextTrigger>
                </DatePicker.ViewControl>
                <DatePicker.Table :class="datePickerStyles.Table">
                  <DatePicker.TableBody :class="datePickerStyles.TableBody">
                    <DatePicker.TableRow
                      v-for="(years, id) in api.getYearsGrid({ columns: 4 })"
                      :key="id"
                      :class="datePickerStyles.TableRow"
                    >
                      <DatePicker.TableCell
                        v-for="(year, id) in years"
                        :key="id"
                        :value="year.value"
                        :class="datePickerStyles.TableCell"
                      >
                        <DatePicker.TableCellTrigger :class="datePickerStyles.TableCellTrigger">
                          {{ year.label }}
                        </DatePicker.TableCellTrigger>
                      </DatePicker.TableCell>
                    </DatePicker.TableRow>
                  </DatePicker.TableBody>
                </DatePicker.Table>
              </DatePicker.Context>
            </DatePicker.View>
          </DatePicker.Content>
        </DatePicker.Positioner>
      </DatePicker.RootProvider>
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.RootProvider>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DateInput, useDateInput } from '@ark-ui/svelte/date-input'
  import { DatePicker, useDatePicker } from '@ark-ui/svelte/date-picker'
  import { Portal } from '@ark-ui/svelte/portal'
  import CalendarIcon from 'lucide-svelte/icons/calendar'
  import ChevronLeftIcon from 'lucide-svelte/icons/chevron-left'
  import ChevronRightIcon from 'lucide-svelte/icons/chevron-right'
  import styles from 'styles/date-input.module.css'
  import datePickerStyles from 'styles/date-picker.module.css'

  const id = $props.id()
  const datePicker = useDatePicker({ id: `${id}-picker` })
  const dateInput = useDateInput(() => ({
    id,
    value: datePicker().value,
    onValueChange(details) {
      datePicker().setValue(details.value)
    },
  }))
</script>

<DateInput.RootProvider value={dateInput} class={styles.Root}>
  <DateInput.Label class={styles.Label}>Date</DateInput.Label>
  <DateInput.Control class={styles.Control}>
    <DatePicker.RootProvider value={datePicker} class={datePickerStyles.Root}>
      <DatePicker.Control class={datePickerStyles.Control}>
        <DateInput.SegmentGroup class={styles.SegmentGroup}>
          <DateInput.SegmentContext>
            {#snippet render(segment)}
              <DateInput.Segment class={styles.Segment} {segment} />
            {/snippet}
          </DateInput.SegmentContext>
        </DateInput.SegmentGroup>
        <DatePicker.Trigger class={datePickerStyles.Trigger}>
          <CalendarIcon />
        </DatePicker.Trigger>
      </DatePicker.Control>
      <Portal>
        <DatePicker.Positioner>
          <DatePicker.Content class={datePickerStyles.Content}>
            <DatePicker.View view="day" class={datePickerStyles.View}>
              <DatePicker.Context>
                {#snippet render(datePicker)}
                  <DatePicker.ViewControl class={datePickerStyles.ViewControl}>
                    <DatePicker.PrevTrigger class={datePickerStyles.PrevTrigger}>
                      <ChevronLeftIcon />
                    </DatePicker.PrevTrigger>
                    <DatePicker.ViewTrigger class={datePickerStyles.ViewTrigger}>
                      <DatePicker.RangeText />
                    </DatePicker.ViewTrigger>
                    <DatePicker.NextTrigger class={datePickerStyles.NextTrigger}>
                      <ChevronRightIcon />
                    </DatePicker.NextTrigger>
                  </DatePicker.ViewControl>
                  <DatePicker.Table class={datePickerStyles.Table}>
                    <DatePicker.TableHead class={datePickerStyles.TableHead}>
                      <DatePicker.TableRow class={datePickerStyles.TableRow}>
                        {#each datePicker().weekDays as weekDay}
                          <DatePicker.TableHeader class={datePickerStyles.TableHeader}>
                            {weekDay.short}
                          </DatePicker.TableHeader>
                        {/each}
                      </DatePicker.TableRow>
                    </DatePicker.TableHead>
                    <DatePicker.TableBody class={datePickerStyles.TableBody}>
                      {#each datePicker().weeks as week}
                        <DatePicker.TableRow class={datePickerStyles.TableRow}>
                          {#each week as day}
                            <DatePicker.TableCell class={datePickerStyles.TableCell} value={day}>
                              <DatePicker.TableCellTrigger class={datePickerStyles.TableCellTrigger}>
                                {day.day}
                              </DatePicker.TableCellTrigger>
                            </DatePicker.TableCell>
                          {/each}
                        </DatePicker.TableRow>
                      {/each}
                    </DatePicker.TableBody>
                  </DatePicker.Table>
                {/snippet}
              </DatePicker.Context>
            </DatePicker.View>
            <DatePicker.View view="month" class={datePickerStyles.View}>
              <DatePicker.Context>
                {#snippet render(datePicker)}
                  <DatePicker.ViewControl class={datePickerStyles.ViewControl}>
                    <DatePicker.PrevTrigger class={datePickerStyles.PrevTrigger}>
                      <ChevronLeftIcon />
                    </DatePicker.PrevTrigger>
                    <DatePicker.ViewTrigger class={datePickerStyles.ViewTrigger}>
                      <DatePicker.RangeText />
                    </DatePicker.ViewTrigger>
                    <DatePicker.NextTrigger class={datePickerStyles.NextTrigger}>
                      <ChevronRightIcon />
                    </DatePicker.NextTrigger>
                  </DatePicker.ViewControl>
                  <DatePicker.Table class={datePickerStyles.Table}>
                    <DatePicker.TableBody class={datePickerStyles.TableBody}>
                      {#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months}
                        <DatePicker.TableRow class={datePickerStyles.TableRow}>
                          {#each months as month}
                            <DatePicker.TableCell class={datePickerStyles.TableCell} value={month.value}>
                              <DatePicker.TableCellTrigger class={datePickerStyles.TableCellTrigger}>
                                {month.label}
                              </DatePicker.TableCellTrigger>
                            </DatePicker.TableCell>
                          {/each}
                        </DatePicker.TableRow>
                      {/each}
                    </DatePicker.TableBody>
                  </DatePicker.Table>
                {/snippet}
              </DatePicker.Context>
            </DatePicker.View>
            <DatePicker.View view="year" class={datePickerStyles.View}>
              <DatePicker.Context>
                {#snippet render(datePicker)}
                  <DatePicker.ViewControl class={datePickerStyles.ViewControl}>
                    <DatePicker.PrevTrigger class={datePickerStyles.PrevTrigger}>
                      <ChevronLeftIcon />
                    </DatePicker.PrevTrigger>
                    <DatePicker.ViewTrigger class={datePickerStyles.ViewTrigger}>
                      <DatePicker.RangeText />
                    </DatePicker.ViewTrigger>
                    <DatePicker.NextTrigger class={datePickerStyles.NextTrigger}>
                      <ChevronRightIcon />
                    </DatePicker.NextTrigger>
                  </DatePicker.ViewControl>
                  <DatePicker.Table class={datePickerStyles.Table}>
                    <DatePicker.TableBody class={datePickerStyles.TableBody}>
                      {#each datePicker().getYearsGrid({ columns: 4 }) as years}
                        <DatePicker.TableRow class={datePickerStyles.TableRow}>
                          {#each years as year}
                            <DatePicker.TableCell class={datePickerStyles.TableCell} value={year.value}>
                              <DatePicker.TableCellTrigger class={datePickerStyles.TableCellTrigger}>
                                {year.label}
                              </DatePicker.TableCellTrigger>
                            </DatePicker.TableCell>
                          {/each}
                        </DatePicker.TableRow>
                      {/each}
                    </DatePicker.TableBody>
                  </DatePicker.Table>
                {/snippet}
              </DatePicker.Context>
            </DatePicker.View>
          </DatePicker.Content>
        </DatePicker.Positioner>
      </Portal>
    </DatePicker.RootProvider>
  </DateInput.Control>
  <DateInput.HiddenInput />
</DateInput.RootProvider>

```

## API Reference

### Props

<ComponentTypes id="date-input" />

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `focused` | `boolean` | Whether the date input is focused |
| `disabled` | `boolean` | Whether the date input is disabled |
| `invalid` | `boolean` | Whether the date input is invalid |
| `value` | `DateValue[]` | The selected date(s). |
| `valueAsDate` | `Date[]` | The selected date(s) as Date objects. |
| `valueAsString` | `string[]` | The selected date(s) as strings. |
| `placeholderValue` | `DateValue` | The placeholder date. |
| `displayValues` | `IncompleteDate[]` | Per-group editing state. Each IncompleteDate tracks which segments have been
filled in by the user (non-null = entered, null = placeholder). |
| `focus` | `VoidFunction` | Focuses the first segment. |
| `setValue` | `(values: DateValue[]) => void` | Sets the selected date(s) to the given values. |
| `clearValue` | `VoidFunction` | Clears the selected date(s). |
| `getSegments` | `(props?: SegmentsProps | undefined) => DateSegment[]` | Returns the segments for the given index. |
| `getSegmentState` | `(props: SegmentProps) => SegmentState` | Returns the state details for a given segment. |


## Accessibility

Complies with the [Spinbutton WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/).