Date Input

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

import { DateInputRoot, DateInput, TimeInputRoot } from "@tilt-legal/cubitt-components/primitives";

<DateInputRoot>
  <DateInput />
</DateInputRoot>

<TimeInputRoot>
  <DateInput />
</TimeInputRoot>

<DateInputRoot granularity="minute" hourCycle={24}>
  <DateInput />
</DateInputRoot>

Examples

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";

<DateInputRoot>
  <DateInput />
</DateInputRoot>

<InputGroup>
  <InputAddon>
    <CalendarDays />
  </InputAddon>
  <DateInputRoot>
    <DateInput />
  </DateInputRoot>
</InputGroup>

<InputWrapper>
  <CalendarDays />
  <DateInputRoot>
    <DateInput />
  </DateInputRoot>
</InputWrapper>

Time Input

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";

<TimeInputRoot>
  <DateInput />
</TimeInputRoot>

<InputGroup>
  <InputAddon>
    <Clock />
  </InputAddon>
  <TimeInputRoot>
    <DateInput />
  </TimeInputRoot>
</InputGroup>

<InputWrapper>
  <Clock />
  <TimeInputRoot>
    <DateInput />
  </TimeInputRoot>
</InputWrapper>

Date & Time Input

import { DateInputRoot } from "@tilt-legal/cubitt-components/primitives";
import { CalendarDays } from "@tilt-legal/cubitt-icons/ui/outline";

<InputWrapper>
  <CalendarDays />
  <DateInputRoot granularity="minute" hourCycle={24}>
    <DateInput />
  </DateInputRoot>
</InputWrapper>;

API Reference

DateInput

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the input styling
`className`	`string`	—	Additional classes

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

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.

Date Input

On this page