uiCategories.interactiveElements.components.timePicker

uiCategories.interactiveElements.components.showcases.timePicker.description

Installation

Import

Usage

uiCategories.interactiveElements.components.showcases.timePicker.usage

Design Guidelines

uiCategories.interactiveElements.components.showcases.timePicker.designGuidelines

uiCategories.interactiveElements.components.showcases.timePicker.examples.basicUsage.title

uiCategories.interactiveElements.components.showcases.timePicker.examples.basicUsage.description

uiCategories.interactiveElements.components.showcases.timePicker.examples.12HourFormat.title

uiCategories.interactiveElements.components.showcases.timePicker.examples.12HourFormat.description

uiCategories.interactiveElements.components.showcases.timePicker.examples.withSeconds.title

uiCategories.interactiveElements.components.showcases.timePicker.examples.withSeconds.description

uiCategories.interactiveElements.components.showcases.timePicker.examples.differentSizes.title

uiCategories.interactiveElements.components.showcases.timePicker.examples.differentSizes.description

uiCategories.interactiveElements.components.showcases.timePicker.examples.withDateValue.title

uiCategories.interactiveElements.components.showcases.timePicker.examples.withDateValue.description

uiCategories.interactiveElements.components.showcases.timePicker.examples.24HourWithSeconds.title

uiCategories.interactiveElements.components.showcases.timePicker.examples.24HourWithSeconds.description

uiCategories.interactiveElements.components.showcases.timePicker.examples.formIntegrationWorkSchedule.title

uiCategories.interactiveElements.components.showcases.timePicker.examples.formIntegrationWorkSchedule.description

uiCategories.interactiveElements.components.showcases.timePicker.examples.formIntegrationEventTiming.title

uiCategories.interactiveElements.components.showcases.timePicker.examples.formIntegrationEventTiming.description

uiCategories.interactiveElements.components.showcases.timePicker.examples.formIntegration24HourFormat.title

uiCategories.interactiveElements.components.showcases.timePicker.examples.formIntegration24HourFormat.description

TimePickerField

uiCategories.interactiveElements.components.showcases.timePicker.composedComponents.timePickerField.description packages.composedComponents.extends TimePicker. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2

packages.propsTable.headers.name	packages.propsTable.headers.type	packages.propsTable.headers.default	packages.propsTable.headers.description
`field`	`FieldMetadata`	—	uiCategories.interactiveElements.components.showcases.timePicker.composedComponents.timePickerField.props.field.description
`label`	`string \| React.ReactNode`	—	uiCategories.interactiveElements.components.showcases.timePicker.composedComponents.timePickerField.props.label.description
`topText`	`string \| React.ReactNode`	—	uiCategories.interactiveElements.components.showcases.timePicker.composedComponents.timePickerField.props.topText.description
`labelProps`	`React.LabelHTMLAttributes<HTMLLabelElement>`	—	uiCategories.interactiveElements.components.showcases.timePicker.composedComponents.timePickerField.props.labelProps.description
`inputClass`	`string`	—	uiCategories.interactiveElements.components.showcases.timePicker.composedComponents.timePickerField.props.inputClass.description
`wrapperClassName`	`string`	—	uiCategories.interactiveElements.components.showcases.timePicker.composedComponents.timePickerField.props.wrapperClassName.description
`inputRef`	`React.Ref<HTMLInputElement>`	—	uiCategories.interactiveElements.components.showcases.timePicker.composedComponents.timePickerField.props.inputRef.description
`className`	`string`	—	packages.commonProps.className.description

packages.sections.api

Component props and API reference This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. For detailed documentation and examples, see the Style Props documentation.

packages.propsTable.headers.name	packages.propsTable.headers.type	packages.propsTable.headers.default	packages.propsTable.headers.description
`value`	`string \| { hour: string; min: string; sec?: string; string: string } \| Date`	`""`	uiCategories.interactiveElements.components.showcases.timePicker.props.value.description
`onChange`	`(time: { hour: string; min: string; sec?: string; string: string }) => void`	`-`	uiCategories.interactiveElements.components.showcases.timePicker.props.onChange.description
`showSeconds`	`boolean`	`false`	uiCategories.interactiveElements.components.showcases.timePicker.props.showSeconds.description
`use24Hour`	`boolean`	`false`	uiCategories.interactiveElements.components.showcases.timePicker.props.use24Hour.description
`placeholder`	`string`	`"Select time"`	uiCategories.interactiveElements.components.showcases.timePicker.props.placeholder.description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	uiCategories.interactiveElements.components.showcases.timePicker.props.size.description
`inputProps`	`TimePickerInputProps`	`{}`	uiCategories.interactiveElements.components.showcases.timePicker.props.inputProps.description
`contentProps`	`TimePopoverProps["contentProps"]`	`{}`	uiCategories.interactiveElements.components.showcases.timePicker.props.contentProps.description
`className`	`string`	—	packages.commonProps.className.description

packages.title