Skip to content
comp0

comp0

Fields

Date Field

Native date and time inputs with the shared label and feedback pieces.

When to use it: Use them whenever people type or pick a plain date or time value.

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

Loading example…
Date Field.tsxtsx
import { Description, Label, TextField } from "@comp0/react";
import { DateField, TimeField } from "@comp0/react";

export function Example() {
  return (
    <div className="flex max-w-xs flex-col gap-6">
      <TextField as="div" className="flex flex-col gap-1.5">
        <Label className="text-base font-medium text-zinc-900 sm:text-sm dark:text-zinc-100">
          Departure date
        </Label>
        <DateField
          className="w-full rounded border border-zinc-950/10 bg-white px-3 py-2.5 text-base text-zinc-950 outline-teal-600 focus-visible:outline-2 sm:py-2 sm:text-sm dark:border-white/10 dark:bg-zinc-900 dark:text-zinc-50 dark:outline-teal-400"
          name="departure"
          min="2026-07-01"
          max="2026-08-31"
        />
        <Description className="text-base text-zinc-600 sm:text-sm dark:text-zinc-400">
          Trips run in July and August.
        </Description>
      </TextField>
      <TextField as="div" className="flex flex-col gap-1.5">
        <Label className="text-base font-medium text-zinc-900 sm:text-sm dark:text-zinc-100">
          Pickup time
        </Label>
        <TimeField
          className="w-full rounded border border-zinc-950/10 bg-white px-3 py-2.5 text-base text-zinc-950 outline-teal-600 focus-visible:outline-2 sm:py-2 sm:text-sm dark:border-white/10 dark:bg-zinc-900 dark:text-zinc-50 dark:outline-teal-400"
          name="pickup"
          step={900}
        />
        <Description className="text-base text-zinc-600 sm:text-sm dark:text-zinc-400">
          Pickups run every 15 minutes.
        </Description>
      </TextField>
    </div>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. TextFieldOptional

    Optional shared field brain connecting the label, input, help, and errors. Does not add a DOM element.

  2. Label

    Visible name connected to the input. Owns a DOM element.

  3. DateField

    Native date input; the browser owns typing and validation. Owns a DOM element.

  4. TimeFieldOptional

    Native time input over the same field wiring. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Start a TextField with a Label and put DateField (or TimeField) inside it.

  2. 2

    Add the supporting parts

    Add Description for a hint, FieldError for validation, and min/max ISO bounds.

  3. 3

    Make the behavior clear

    Give each input a name so the form submits its ISO value; the browser handles parsing and the platform picker.

    Exampletsx
    <TextField>
  <Label>Departure</Label>
  <DateField name="departure" min="2026-07-01" />
</TextField>;

Keyboard

↑
Steps the focused date or time segment up.
↓
Steps the focused date or time segment down.
←
Moves to the previous segment.
→
Moves to the next segment.

Forms and accessibility

DateField and TimeField are native inputs: name them and they submit ISO values ("YYYY-MM-DD" and "HH:mm") with native min/max/required validation.

Accessibility checklist

  • Always name the input with a Label or an aria-label; the segments announce themselves.
  • Native inputs bring the platform's own accessible date and time pickers for free; do not hide them without a replacement.
  • Use min/max instead of custom validation so errors surface through the browser's constraint messages.

API reference

Importtsx
import { DateField, Description, Label, TextField, TimeField } from "@comp0/react";

TextField

OptionalContext only

Optional shared field brain connecting the label, input, help, and errors.

PropTypeDescription
valuestringControlled ISO value.
defaultValuestringInitial ISO value.
onChange(value: string) => voidReceives the next ISO value.
disabledbooleanField-wide states.
invalidbooleanField-wide states.
requiredbooleanField-wide states.

Label

DOM element

Visible name connected to the input.

DateField

DOM element

Native date input; the browser owns typing and validation.

PropTypeDescription
namestringSubmission name; the value submits as YYYY-MM-DD.
minstringEarliest and latest selectable dates as "YYYY-MM-DD".
maxstringEarliest and latest selectable dates as "YYYY-MM-DD".
disabledbooleanOverride the field-wide state for this control.
requiredbooleanOverride the field-wide state for this control.
aria-labelstringNames the input when there is no visible Label.

TimeField

OptionalDOM element

Native time input over the same field wiring.

PropTypeDescription
namestringSubmission name; the value submits as HH:mm.
minstringEarliest and latest selectable times such as "09:00".
maxstringEarliest and latest selectable times such as "09:00".
stepnumberGranularity in seconds; 60 is the browser default, 1 reveals seconds.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

DateField

Style hookMeaning
[data-value]The field has a value.
[data-invalid]The value is invalid.
[data-focus-visible]Keyboard focus is on the field.

TimeField

Style hookMeaning
[data-value]The field has a value.
[data-invalid]The value is invalid.
[data-focus-visible]Keyboard focus is on the field.

Keep exploring