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

Trips run in July and August.
Pickups run every 15 minutes.
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.
disabled / invalid / 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.
min / maxstringEarliest and latest selectable dates as "YYYY-MM-DD".
disabled / 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.
min / 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.

[data-value]

on DateField, TimeField

The field has a value.
[data-invalid]

on DateField, TimeField

The value is invalid.
[data-focus-visible]

on DateField, TimeField

Keyboard focus is on the field.

Keep exploring