Package:
@react-form-builder/components-rsuite
· Source
code
Introduction
TimePicker represents a highly customizable component that allows users to enter and pick
time in various formats. In particular, it provides a text input field and a selection element where users can select the desired time.
You can customise this component to work with a specific time format, change its appearance, etc.
This component is a part of @react-form-builder/components-rsuite.
The following introduces and describes available properties and options for the TimePicker component.
TimePicker component data is stored in HH:mm:ss format.
Main properties
The following general properties are available within the Main tab:
| Name | Type | Description |
|---|
| Label | string | Provide a title for your component |
| Placeholder | string | Placeholder string |
| Value | string | Provide value for the input field |
| Default value | boolean | Sets default time value for the input field |
| Format | string | Format of the time when rendered in the input (e.g., HH:mm:ss) |
| Editable | boolean | If set to true, the time can be entered via the keyboard |
| Cleanable | boolean | If set to true, allows users to change specified time |
| Disabled | boolean | Disables the component |
| Read Only | boolean | If set to true, makes your checkbox unavailable to interact with |
| Open | boolean | Whether the time selection window is open |
| Placement | choice | Select the placement of component (e.g., bottom end, top start, etc.) |
| Size | choice | Select the size of the input field (e.g., large, small, etc.) |
Style properties
These are properties that allow to customize the size, color and other style properties of your component:
-
For Device: You can provide component’s style customization for all devices or specific
devices by using this dropdown list. Refer to Adaptive Layout for more
details.
-
Component > Class Name: Add a class name for your component for the subsequent styling if necessary.
-
Wrapper: The options below enable you to tailor the appearance of your component and customize
it for a specific device type, as selected in the For Device property:
| Name | Type | Description |
|---|
| Width | number | Specifies the width for your component |
| Height | number | Specifies the height for your component |
| Margin top/right/bottom/left | number | Margin values for you component |
| Color | string | Allows customizing the text color |
| Background color | string | Enables customizing the background color |
Last modified on April 16, 2026
