## Overview [#overview] `DateInput` provides segmented, keyboard-friendly inputs for date and time built on top of react-aria-components. It renders discrete segments (day/month/year and hours/minutes) for both date and time inputs. Cubitt defaults the locale to `en-AU` so dates display using Australian formats out of the box. Pass a `locale` prop or wrap the component in `I18nProvider` if you need a different locale. Always provide an accessible label. Either wrap the input in a visible `Label` component or pass `aria-label` / `aria-labelledby` to `DateInputRoot` / `TimeInputRoot` . Component will throw console warning if no label is provided. ## Usage [#usage] ```tsx import { DateInputRoot, DateInput, TimeInputRoot } from "@tilt-legal/cubitt-components/primitives"; ``` ```tsx ``` ## Examples [#examples] ```tsx import { DateInputRoot, DateInput, InputGroup, InputAddon, InputWrapper, } from "@tilt-legal/cubitt-components/primitives"; import { DateInput, InputGroup, InputAddon, InputWrapper, } from "@tilt-legal/cubitt-components/primitives"; import { CalendarDays } from "@tilt-legal/cubitt-icons/ui/outline"; ``` ### Time Input [#time-input] ```tsx import { TimeInputRoot } from "@tilt-legal/cubitt-components/primitives"; import { DateInput, InputWrapper } from "@tilt-legal/cubitt-components/primitives"; import { Clock } from "@tilt-legal/cubitt-icons/ui/outline"; ``` ### Date & Time Input [#date--time-input] ```tsx import { DateInputRoot } from "@tilt-legal/cubitt-components/primitives"; import { CalendarDays } from "@tilt-legal/cubitt-icons/ui/outline"; ; ``` ## API Reference [#api-reference] ### DateInput [#dateinput] | Prop | Type | Default | Description | | ----------- | ---------------------- | ------- | ------------------------- | | `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size of the input styling | | `className` | `string` | — | Additional classes | ### DateInputRoot [#dateinputroot] | Prop | Type | Default | Description | | ------------- | ------------------------------------- | --------- | ------------------------------------- | | `granularity` | `"day" \| "minute" \| "second"` | `"day"` | Precision of the field | | `hourCycle` | `12 \| 24` | locale | Hour cycle for time-related segments | | `locale` | `string` | `'en-AU'` | Locale applied to the segmented field | | `className` | `string` | — | Additional classes | | `children` | `React.ReactNode` | — | Typically a `DateInput` | | ...RAC props | `react-aria-components` DateField API | — | All `DateField` props are supported | ### TimeInputRoot [#timeinputroot] | Prop | Type | Default | Description | | ------------- | ------------------------------------- | --------- | ------------------------------------- | | `granularity` | `"minute" \| "second"` | — | Precision of the field | | `hourCycle` | `12 \| 24` | locale | Hour cycle | | `locale` | `string` | `'en-AU'` | Locale applied to the segmented field | | `className` | `string` | — | Additional classes | | `children` | `React.ReactNode` | — | Typically a `DateInput` | | ...RAC props | `react-aria-components` TimeField API | — | All `TimeField` props are supported | `DateInput` works with `InputGroup`, `InputAddon`, and `InputWrapper` for adding icons and addons. See [Input docs](/primitives/input#api-reference).