Toggle

A toggle component with support for sizes and colors. Form compatible.

Usage

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

Preview

Label

Code

ToggleExample.astro

---
import { Toggle } from 'studiocms:ui/components';
---

<Toggle label='Label' color='primary' />

Sizes

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

There’s three different sizes for toggles:

Preview

Small

Medium

Large

Code

ToggleSizesExample.astro

---
import { Toggle } from 'studiocms:ui/components';
---

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

Colors

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

The toggle component supports all default colorways.

Preview

Default

Primary

Success

Warning

Danger

Info

Monochrome

Code

ToggleColorsExample.astro

---
import { Toggle } from 'studiocms:ui/components';
---

<Toggle label='Default' defaultChecked />
<Toggle label='Primary' color='primary' defaultChecked />
<Toggle label='Success' color='success' defaultChecked />
<Toggle label='Warning' color='warning' defaultChecked />
<Toggle label='Danger' color='danger' defaultChecked />
<Toggle label="Info" color="info" defaultChecked />
<Toggle label="Monochrome" color="mono" 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 toggle 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

ToggleFormExample.astro

---
import { Toggle } from 'studiocms:ui/components';
---

<Toggle
  label='Required & Custom Name'
  color='primary'
  isRequired
  name='example'
/>

Note

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