TimeGrid

Source@react-form-builder/components-mantine

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

At the bottom of the Main properties menu, you can find additional options:

• Render When: Provides conditional rendering for your component as described in the corresponding chapter.
• HTML attributes: Allows you to provide custom HTML attributes for your form.

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