TimePicker

A time input component for selecting and editing time values. Perfect for scheduling, time tracking, and any scenario requiring precise time input.

Import

import { TimePicker } from "@sparrowengg/twigs-react";

Usage

const TimePickerExample = () => {
  return (
    <Box css={{ display: "flex", flexDirection: "column", gap: "$4" }}>
      <TimePicker label="Select time" />
      <TimePicker label="24 Hour Time" hourCycle={24} />
      <TimePicker label="Hour and Minute" granularity="minute" />
    </Box>
  );
};

Props

Prop	Type	Default
`label?`	`string`	-
`value?`	`TimeValue`	-
`defaultValue?`	`TimeValue`	-
`onChange?`	`(value: TimeValue) => void`	-
`hourCycle?`	`12 \| 24`	`24`
`granularity?`	`'hour' \| 'minute' \| 'second'`	`'minute'`
`isDisabled?`	`boolean`	`false`
`isReadOnly?`	`boolean`	`false`
`isRequired?`	`boolean`	`false`
`autoFocus?`	`boolean`	`false`
`placeholderValue?`	`TimeValue`	-
`minValue?`	`TimeValue`	-
`maxValue?`	`TimeValue`	-
`step?`	`number`	-
`formatOptions?`	`Intl.DateTimeFormatOptions`	-
`locale?`	`string`	-
`description?`	`string`	-
`errorMessage?`	`string`	-
`validationState?`	`'valid' \| 'invalid'`	-
`css?`	`object`	-

TimePicker

Import

Usage

Props

TimePicker

On this page