Checkbox

Overview

We have made the custom checkbox components for you to make it easy for you and you don't have to waste your precious time.

Please visit MUI Checkbox Docs (opens new window) for a proper explanation of the Checkbox component.

Basic Custom Checkbox

Usage:

Props

Prop	Type	Required	Description
name	string	Yes	Name attribute of the checkbox
selected	string[]	Yes	Array of selected checkboxes
data	CustomCheckboxBasicData	Yes	Object to create checkbox
handleChange	(value: string) => void	Yes	Run a function when an option is changed
gridProps	GridProps	Yes	Add props of the MUI's Grid component
color	primary, secondary, error, warning, info, success	No	Color of the selected checkboxes

The type of CustomCheckboxBasicData is as follows:

Property	Type	Required	Description
value	string	Yes	Identify a particular checkbox
title	ReactNode	No	Title for the checkbox component
meta	ReactNode	No	Add content to the right side of the title. (To add meta in your checkbox, you need to add the title property as well)
content	ReactNode	No	Add content below the title
isSelected	boolean	No	If true, checkbox will be selected at initial render

Custom Checkbox with Icons

Usage:

Props

Prop	Type	Required	Description
name	string	Yes	Name attribute of the checkbox
selected	string[]	Yes	Array of selected checkboxes
data	CustomCheckboxIconsData	Yes	Object to create checkbox
handleChange	(value: string) => void	Yes	Run a function when an option is changed
gridProps	GridProps	Yes	Add props of the MUI's Grid component
icon	string	No	Icon for the checkbox component
iconProps	Omit<IconProps, 'icon'>	No	Add props of Iconify's Icon component
color	primary, secondary, error, warning, info, success	No	Color of the selected checkboxes

The type of CustomCheckboxIconsData is as follows:

Property	Type	Required	Description
value	string	Yes	Identify a particular checkbox
title	ReactNode	No	Title for the checkbox component
content	ReactNode	No	Add content below the title
isSelected	boolean	No	If true, checkbox will be selected at initial render

Custom Checkbox with Images

Usage:

Props

Prop	Type	Required	Description
name	string	Yes	Name attribute of the checkbox
selected	string[]	Yes	Array of selected checkboxes
data	CustomCheckboxImgData	Yes	Object to create checkbox
handleChange	(value: string) => void	Yes	Run a function when an option is changed
gridProps	GridProps	Yes	Add props of the MUI's Grid component
color	primary, secondary, error, warning, info, success	No	Color of the selected checkboxes

The type of CustomCheckboxImgData is as follows:

Property	Type	Required	Description
value	string	Yes	Identify a particular checkbox
img	ReactNode	Yes	Image for the checkbox
alt	string	No	Alternate text for the image
isSelected	boolean	No	If true, checkbox will be selected at initial render