JollyUI
  1. Docs
  2. components
  3. TimeField

TimeField

A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment.

A time field can be built using <input type="time">, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. TimeField helps achieve accessible and international time fields that can be styled as needed.

Loading...

Installation

npx shadcn@latest add https://jollyui.dev/default/datefield

Composed Components

A TimeField uses the following components, which may also be used standalone or reused in other components.

Label

A label provides context for an element.

Reusable Wrapper - Example

If you will use a TimeField in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.

The installed file includes a reusable wrapper JollyTimeField. This wrapper serves as an excellent starting point for use throughout your codebase.

Loading...

The JollyTimeField component extends the props of React Aria TimeField and adds:

PropTypeDefaultDescription
labelstring | undefinedundefinedLabel for the time field
descriptionstring | undefinedundefinedDescription text for the time field
errorMessagestring | ((validation: AriaValidationResult) => string) | undefinedundefinedError message to display or function to generate it

You can copy this wrapper and create variations as needed for different use cases in your application. This approach promotes consistency while still allowing for flexibility in implementation.

Examples

Basic

Loading...

Values

Timezones

Loading...

Granularity

Loading...

Validation

Loading...

Min/Max values

Loading...

Custom Validation

Loading...

Description

Loading...