Checkbox

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

Usage

'Read the “', Usage, '” section'

Preview

Label

Code

CheckboxExample.astro

---
import { Checkbox } from '@studiocms/ui/components';
---

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

Sizes

'Read the “', Sizes, '” section'

There’s three different sizes for checkboxes:

Preview

Small

Medium

Large

Code

CheckboxSizesExample.astro

---
import { Checkbox } from '@studiocms/ui/components';
---

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

Colors

'Read the “', Colors, '” section'

The checkbox component supports all default colorways.

Preview

Default

Primary

Success

Warning

Danger

Code

CheckboxColorsExample.astro

---
import { Checkbox } from '@studiocms/ui/components';
---

<Checkbox label='Default' defaultChecked />
<Checkbox label='Primary' color='primary' defaultChecked />
<Checkbox label='Success' color='success' defaultChecked />
<Checkbox label='Warning' color='warning' defaultChecked />
<Checkbox label='Danger' color='danger' defaultChecked />

Form Support

'Read the “', Form Support, '” section'

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

Required & Custom Name *

Code

CheckboxFormExample.astro

---
import { Checkbox } from '@studiocms/ui/components';
---

<Checkbox
  label='Required & Custom Name'
  color='primary'
  name='required-checkbox'
  isRequired
/>

Note

If no name is set, a random one is generated for the component.