Package:
@react-form-builder/components-mantine
· Source code
Introduction
The TimeGrid component displays a grid of time slots (e.g. in 24h or 12h format) for scheduling, booking, or time selection. You can
provide a custom list of times or a start/end range with an interval. The component requires @mantine/dates and is based on
Mantine TimeGrid.
It is included within the following NPM package: @react-form-builder/components-mantine.
Main properties
The following general properties are available within the Main tab:
| Name | Type | Description |
|---|
| Label | string | Label for the time grid |
| Description | string | Helper text below the field |
| Error | string | Error message; when set, applies error styling |
| Value | string | Selected time value (e.g. "HH:mm") (data-bound) |
| Data | array | Custom list of time strings in 24h format; if empty, times are generated from start/end |
| Start time | string | Start of the time range (e.g. "00:00") (default: "00:00") |
| End time | string | End of the time range (e.g. "23:59") (default: "23:59") |
| Format | '12h' | '24h' | Time display format (default: '24h') |
| With seconds | boolean | If true, includes seconds in the time values (default: false) |
| Allow deselect | boolean | If true, allows clearing the selection (default: false) |
| Min time | string | Minimum selectable time |
| Max time | string | Maximum selectable time |
| Size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | Size of the grid items |
| Disabled | boolean | Disables the time grid (default: false) |
| On change | event | Fired when the selected time changes |
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
