# 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


checkbox-basic

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


checkbox-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


checkbox-img

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
Last Updated: 5/8/2024, 7:58:27 AM