Inputs

TimePicker

A styled native time input that preserves platform editing and validation behavior.

TimePickerView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

Start time

Available in 15-minute increments.

tsx

import { Cell } from "retend";

import { Field, TimePicker } from "innate-ui";
import classes from "../docs.module.css";

export function TimePickerDemo() {
  const time = Cell.source("09:30");

  return (
    <Field id="time-picker-demo" class={[classes.selectExample, classes.datePickerDemo]}>
      <Field.Label>Start time</Field.Label>
      <TimePicker
        value={time}
        lang="en-GB"
        min="08:00"
        max="18:00"
        step={900}
        onChange={(value) => time.set(value)}
      />
      <Field.Description>Available in 15-minute increments.</Field.Description>
    </Field>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

TimePickerProps

Prop	Type	Default
`children` Optional content used by `Input.Start` and `Input.End` composition.	`JSX.Children`	`—`
`onChange` Called with the normalized value when the input changes.	`(value: JSX.InputTypeToValueMap[T]) => void`	`—`
`onInput` Native input handler called before `onChange`.	`EventHandlerProp<HTMLInputElement, Event>`	`—`
`ariaDescribedBy` Ids of elements that describe the input.	`JSX.ValueOrCell<string \| undefined>`	`—`
`ref` Receives the native input element.	`SourceCell<HTMLInputElement \| null>`	`—`
`value` Input value. Checkable input types treat this as their checked state.	`JSX.ValueOrCell<JSX.InputTypeToValueMap[T]>`	`—`
`invalid` Whether the input is in an invalid state.	`JSX.ValueOrCell<boolean>`	`false`
`accept` Native file picker accept string for `type="file"`.	`JSX.ValueOrCell<string \| undefined>`	`—`
`capture` Preferred camera used by supporting browsers for `type="file"`.	`JSX.ValueOrCell<"user" \| "environment" \| undefined>`	`—`

Inspect the typed source →