Checkbox

shadow

A checkbox, or also a check box, is an element that allows users to select one or more options from a set. Click on the checkbox to change its status to true or false.

Basic Usage

Indeterminate checkbox

When the indeterminate attribute is added, a checkbox is displayed whose default state is neutral, i.e. neither true nor false.

Variant

Adding the variant attribute with the value circle will display a checkbox in a round shape.

Attributes and Properties

checked

Description	If true, the default state of the checkbox is changed to true
Attribute	checked
Type	boolean
Default	false

color

Description	Specifies the background color of the checkbox. The default options are "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information, go to: theming.
Attribute	color
Type	"danger." ｜ "primary" ｜ "success" ｜ "neutral" ｜ "complete" ｜ "warning" ｜ string ｜ undefined
Default	undefined

disabled

Description	If true, the checkbox cannot be interacted with
Attribute	disabled
Type	boolean
Default	false

indeterminate

Description	If true, displays a checkbox whose default state is neutral.
Attribute	indeterminate
Type	boolean
Default	false

Option

Description	If true, the appearance of the checkbox is changed to round.
Attribute	Option
Type	"circle"
Default	undefined

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

Name	Description
--wj-checkbox-height	Specifies the minimum height of the checkbox
--wj-checkbox-margin-bottom	Size of the outer bottom edge
--wj-checkbox-margin-inline	Size of outer edges left and right
--wj-checkbox-margin-top	Size of the outer upper edge
--wj-checkbox-width	Specifies the minimum width of the checkbox

Slots

No slots available for this component.