Checkbox

A custom checkbox component with support for sizes and colors. Form compatible.

Usage

Preview
Code

Label

1
---
2
import { Checkbox } from 'studiocms:ui/components';
3
---
4

5
<Checkbox label="Label" color='primary' />

Sizes

There’s three different sizes for checkboxes:

Preview
Code

Small

Medium

Large

1
---
2
import { Checkbox } from 'studiocms:ui/components';
3
---
4

5
<Checkbox label='Small' color='primary' size='sm' defaultChecked />
6
<Checkbox label='Medium' color='primary' defaultChecked />
7
<Checkbox label='Large' color='primary' size='lg' defaultChecked />

Colors

The checkbox component supports all default colorways.

Preview
Code

1
---
2
import { Checkbox } from 'studiocms:ui/components';
3
---
4

5
<Checkbox label='Default' defaultChecked />
6
<Checkbox label='Primary' color='primary' defaultChecked />
7
<Checkbox label='Success' color='success' defaultChecked />
8
<Checkbox label='Warning' color='warning' defaultChecked />
9
<Checkbox label='Danger' color='danger' defaultChecked />
10
<Checkbox label="Info" color="info" defaultChecked />
11
<Checkbox label="Monochrome" color="mono" defaultChecked />

Form Support

If you want to use this component in a form, you’re in luck! There’s two props you can pass: isRequired and name.

The first one does what it says it does, while the latter sets the name attribute so you can access the checkbox in, for example, the FormData returned by a submission. Here’s an example showing how to set both of them:

Preview
Code

Required & Custom Name *

1
---
2
import { Checkbox } from 'studiocms:ui/components';
3
---
4

5
<Checkbox
6
  label='Required & Custom Name'
7
  color='primary'
8
  name='required-checkbox'
9
  isRequired
10
/>