Skip to Content
DocumentationComponentsCheckbox

Checkbox

The checkbox component is a UI element that allows users to select or deselect an option.

Expand code
<Checkbox checked={checked} onChange={(e) => {setChecked(e.target.checked)}}/>
<Checkbox defaultChecked/>
<Checkbox disabled/>
<Checkbox defaultChecked disabled/>

Content

The children prop allows you to add extra content to the checkbox component.
This content is rendered within a label element that is associated with the checkbox input.

Expand code
<Checkbox checked={checked} onChange={(e) => {setChecked(e.target.checked)}}>
  Checkbox content
</Checkbox>
 
<Checkbox disabled>
  Disabled checkbox content
</Checkbox>

Color

You can customize the checkmark color using any value supported by the background-color property in CSS, such as red, #11aa33, or rgb(0,0,0).

Expand code
<Checkbox color={'red'} defaultChecked/>
<Checkbox color={'#11aa33'} defaultChecked/>
<Checkbox color={'#1694d8'} defaultChecked/>
<Checkbox color={'rgb(181,46,213)'} defaultChecked/>
<Checkbox color={'rgb(0,0,0)'} defaultChecked disabled/>

The color of a disabled checkbox cannot be overwritten.

Props

NameTypeDefaultDescription
childrennode-Content of the component
colorstring-Color of the button
darkbooleanfalseUse the darkmode style

In addition to these props the component uses the default html input props (e.g. checked).

Last updated on
TextareaSwitch