BlueStack.io - Component Library

checkbox Component

Checkbox System

Basic Checkboxes

Preview Code

Copy

Default checkbox Checked checkbox Disabled checkbox Disabled checked

<div class="space-y-3">
  <label class="checkbox">
    <input type="checkbox" />
    <span>Default checkbox</span>
  </label>

  <label class="checkbox">
    <input type="checkbox" checked />
    <span>Checked checkbox</span>
  </label>

  <label class="checkbox">
    <input type="checkbox" disabled />
    <span>Disabled checkbox</span>
  </label>

  <label class="checkbox">
    <input type="checkbox" checked disabled />
    <span>Disabled checked</span>
  </label>
</div>

Checkbox Sizes

Preview Code

Copy

Tiny Small Default Large Big

<div class="flex items-center gap-6">
  <label class="checkbox tiny">
    <input type="checkbox" checked />
    <span>Tiny</span>
  </label>

  <label class="checkbox small">
    <input type="checkbox" checked />
    <span>Small</span>
  </label>

  <label class="checkbox">
    <input type="checkbox" checked />
    <span>Default</span>
  </label>

  <label class="checkbox large">
    <input type="checkbox" checked />
    <span>Large</span>
  </label>

  <label class="checkbox big">
    <input type="checkbox" checked />
    <span>Big</span>
  </label>
</div>

Checkbox Colors

Preview Code

Copy

<div class="flex flex-wrap gap-4">
  <label class="checkbox primary"><input type="checkbox" checked /><span>Primary</span></label>
  <label class="checkbox positive"><input type="checkbox" checked /><span>Positive</span></label>
  <label class="checkbox warning"><input type="checkbox" checked /><span>Warning</span></label>
  <label class="checkbox negative"><input type="checkbox" checked /><span>Negative</span></label>
  <label class="checkbox info"><input type="checkbox" checked /><span>Info</span></label>
  <label class="checkbox red"><input type="checkbox" checked /><span>Red</span></label>
  <label class="checkbox orange"><input type="checkbox" checked /><span>Orange</span></label>
  <label class="checkbox yellow"><input type="checkbox" checked /><span>Yellow</span></label>
  <label class="checkbox olive"><input type="checkbox" checked /><span>Olive</span></label>
  <label class="checkbox green"><input type="checkbox" checked /><span>Green</span></label>
  <label class="checkbox teal"><input type="checkbox" checked /><span>Teal</span></label>
  <label class="checkbox blue"><input type="checkbox" checked /><span>Blue</span></label>
  <label class="checkbox violet"><input type="checkbox" checked /><span>Violet</span></label>
  <label class="checkbox purple"><input type="checkbox" checked /><span>Purple</span></label>
  <label class="checkbox pink"><input type="checkbox" checked /><span>Pink</span></label>
  <label class="checkbox brown"><input type="checkbox" checked /><span>Brown</span></label>
  <label class="checkbox grey"><input type="checkbox" checked /><span>Grey</span></label>
  <label class="checkbox black"><input type="checkbox" checked /><span>Black</span></label>
</div>

<div class="flex flex-wrap gap-4">
                <label class="checkbox primary"><input type="checkbox" checked><span>Primary</span></label>
                <label class="checkbox positive"><input type="checkbox" checked><span>Positive</span></label>
                <label class="checkbox warning"><input type="checkbox" checked><span>Warning</span></label>
                <label class="checkbox negative"><input type="checkbox" checked><span>Negative</span></label>
                <label class="checkbox info"><input type="checkbox" checked><span>Info</span></label>
                <label class="checkbox red"><input type="checkbox" checked><span>Red</span></label>
                <label class="checkbox orange"><input type="checkbox" checked><span>Orange</span></label>
                <label class="checkbox yellow"><input type="checkbox" checked><span>Yellow</span></label>
                <label class="checkbox olive"><input type="checkbox" checked><span>Olive</span></label>
                <label class="checkbox green"><input type="checkbox" checked><span>Green</span></label>
                <label class="checkbox teal"><input type="checkbox" checked><span>Teal</span></label>
                <label class="checkbox blue"><input type="checkbox" checked><span>Blue</span></label>
                <label class="checkbox violet"><input type="checkbox" checked><span>Violet</span></label>
                <label class="checkbox purple"><input type="checkbox" checked><span>Purple</span></label>
                <label class="checkbox pink"><input type="checkbox" checked><span>Pink</span></label>
                <label class="checkbox brown"><input type="checkbox" checked><span>Brown</span></label>
                <label class="checkbox grey"><input type="checkbox" checked><span>Grey</span></label>
                <label class="checkbox black"><input type="checkbox" checked><span>Black</span></label>
            </div>

Soft Variant

Preview Code

Copy

<div class="flex flex-wrap gap-4">
  <label class="checkbox soft primary"><input type="checkbox" checked /><span>Primary</span></label>
  <label class="checkbox soft positive"
    ><input type="checkbox" checked /><span>Positive</span></label
  >
  <label class="checkbox soft warning"><input type="checkbox" checked /><span>Warning</span></label>
  <label class="checkbox soft negative"
    ><input type="checkbox" checked /><span>Negative</span></label
  >
  <label class="checkbox soft info"><input type="checkbox" checked /><span>Info</span></label>
  <label class="checkbox soft red"><input type="checkbox" checked /><span>Red</span></label>
  <label class="checkbox soft orange"><input type="checkbox" checked /><span>Orange</span></label>
  <label class="checkbox soft yellow"><input type="checkbox" checked /><span>Yellow</span></label>
  <label class="checkbox soft olive"><input type="checkbox" checked /><span>Olive</span></label>
  <label class="checkbox soft green"><input type="checkbox" checked /><span>Green</span></label>
  <label class="checkbox soft teal"><input type="checkbox" checked /><span>Teal</span></label>
  <label class="checkbox soft blue"><input type="checkbox" checked /><span>Blue</span></label>
  <label class="checkbox soft violet"><input type="checkbox" checked /><span>Violet</span></label>
  <label class="checkbox soft purple"><input type="checkbox" checked /><span>Purple</span></label>
  <label class="checkbox soft pink"><input type="checkbox" checked /><span>Pink</span></label>
  <label class="checkbox soft brown"><input type="checkbox" checked /><span>Brown</span></label>
  <label class="checkbox soft grey"><input type="checkbox" checked /><span>Grey</span></label>
  <label class="checkbox soft black"><input type="checkbox" checked /><span>Black</span></label>
</div>

<div class="flex flex-wrap gap-4">
                <label class="checkbox soft primary"><input type="checkbox" checked><span>Primary</span></label>
                <label class="checkbox soft positive"><input type="checkbox" checked><span>Positive</span></label>
                <label class="checkbox soft warning"><input type="checkbox" checked><span>Warning</span></label>
                <label class="checkbox soft negative"><input type="checkbox" checked><span>Negative</span></label>
                <label class="checkbox soft info"><input type="checkbox" checked><span>Info</span></label>
                <label class="checkbox soft red"><input type="checkbox" checked><span>Red</span></label>
                <label class="checkbox soft orange"><input type="checkbox" checked><span>Orange</span></label>
                <label class="checkbox soft yellow"><input type="checkbox" checked><span>Yellow</span></label>
                <label class="checkbox soft olive"><input type="checkbox" checked><span>Olive</span></label>
                <label class="checkbox soft green"><input type="checkbox" checked><span>Green</span></label>
                <label class="checkbox soft teal"><input type="checkbox" checked><span>Teal</span></label>
                <label class="checkbox soft blue"><input type="checkbox" checked><span>Blue</span></label>
                <label class="checkbox soft violet"><input type="checkbox" checked><span>Violet</span></label>
                <label class="checkbox soft purple"><input type="checkbox" checked><span>Purple</span></label>
                <label class="checkbox soft pink"><input type="checkbox" checked><span>Pink</span></label>
                <label class="checkbox soft brown"><input type="checkbox" checked><span>Brown</span></label>
                <label class="checkbox soft grey"><input type="checkbox" checked><span>Grey</span></label>
                <label class="checkbox soft black"><input type="checkbox" checked><span>Black</span></label>
            </div>

Checkbox Group (Stacked)

Preview Code

Copy

Analytics Dashboard Custom Reports API Access Data Export

<div class="checkboxes">
  <label class="checkbox">
    <input type="checkbox" name="features" value="analytics" checked />
    <span>Analytics Dashboard</span>
  </label>
  <label class="checkbox">
    <input type="checkbox" name="features" value="reports" />
    <span>Custom Reports</span>
  </label>
  <label class="checkbox">
    <input type="checkbox" name="features" value="api" />
    <span>API Access</span>
  </label>
  <label class="checkbox">
    <input type="checkbox" name="features" value="export" checked />
    <span>Data Export</span>
  </label>
</div>

Error State (Shows only when unchecked)

Preview Code

Copy

I agree to the terms and conditions I accept the privacy policy (error removed when checked)

Note: Error styling automatically disappears when checkbox is checked

<div class="space-y-3">
  <label class="checkbox error">
    <input type="checkbox" required />
    <span>I agree to the terms and conditions</span>
  </label>

  <label class="checkbox error">
    <input type="checkbox" checked required />
    <span>I accept the privacy policy (error removed when checked)</span>
  </label>

  <div class="mt-4 text-sm text-gray-600">
    Note: Error styling automatically disappears when checkbox is checked
  </div>
</div>

Indeterminate State (Hierarchical Selection)

Preview Code

Copy

Select all permissions

Read access Write access Delete access

<div class="space-y-2 checkboxes">
  <label class="checkbox parent">
    <input type="checkbox" />
    <span>Select all permissions</span>
  </label>

  <div class="ml-7 space-y-2">
    <label class="checkbox">
      <input type="checkbox" checked />
      <span>Read access</span>
    </label>

    <label class="checkbox">
      <input type="checkbox" />
      <span>Write access</span>
    </label>

    <label class="checkbox">
      <input type="checkbox" />
      <span>Delete access</span>
    </label>
  </div>
</div>

Switch Component

Basic Switches

Preview Code

Copy

Airplane mode

Wi-Fi enabled

Bluetooth

<div class="space-y-4">
  <div class="checkbox switch">
    <input type="checkbox" />
    <span>Airplane mode</span>
  </div>

  <div class="checkbox switch">
    <input type="checkbox" checked />
    <span>Wi-Fi enabled</span>
  </div>

  <div class="checkbox switch">
    <input type="checkbox" />
    <span>Bluetooth</span>
  </div>
</div>

Plain Switches (without icons)

Preview Code

Copy

Airplane mode

Wi-Fi enabled

Bluetooth

<div class="space-y-4">
  <div class="checkbox switch plain">
    <input type="checkbox" />
    <span>Airplane mode</span>
  </div>

  <div class="checkbox switch plain">
    <input type="checkbox" checked />
    <span>Wi-Fi enabled</span>
  </div>

  <div class="checkbox switch plain">
    <input type="checkbox" />
    <span>Bluetooth</span>
  </div>
</div>

Switch Sizes

Preview Code

Copy

Tiny

Small

Default

Large

Big

<div class="flex items-center gap-6">
  <div class="checkbox switch tiny">
    <input type="checkbox" checked />
    <span>Tiny</span>
  </div>

  <div class="checkbox switch small">
    <input type="checkbox" checked />
    <span>Small</span>
  </div>

  <div class="checkbox switch">
    <input type="checkbox" checked />
    <span>Default</span>
  </div>

  <div class="checkbox switch large">
    <input type="checkbox" checked />
    <span>Large</span>
  </div>

  <div class="checkbox switch big">
    <input type="checkbox" checked />
    <span>Big</span>
  </div>
</div>

Switch Colors

Preview Code

Copy

<div class="flex flex-wrap gap-4">
  <div class="checkbox switch primary"><input type="checkbox" checked /><span>Primary</span></div>
  <div class="checkbox switch positive"><input type="checkbox" checked /><span>Positive</span></div>
  <div class="checkbox switch warning"><input type="checkbox" checked /><span>Warning</span></div>
  <div class="checkbox switch negative"><input type="checkbox" checked /><span>Negative</span></div>
  <div class="checkbox switch info"><input type="checkbox" checked /><span>Info</span></div>
  <div class="checkbox switch red"><input type="checkbox" checked /><span>Red</span></div>
  <div class="checkbox switch orange"><input type="checkbox" checked /><span>Orange</span></div>
  <div class="checkbox switch yellow"><input type="checkbox" checked /><span>Yellow</span></div>
  <div class="checkbox switch olive"><input type="checkbox" checked /><span>Olive</span></div>
  <div class="checkbox switch green"><input type="checkbox" checked /><span>Green</span></div>
  <div class="checkbox switch teal"><input type="checkbox" checked /><span>Teal</span></div>
  <div class="checkbox switch blue"><input type="checkbox" checked /><span>Blue</span></div>
  <div class="checkbox switch violet"><input type="checkbox" checked /><span>Violet</span></div>
  <div class="checkbox switch purple"><input type="checkbox" checked /><span>Purple</span></div>
  <div class="checkbox switch pink"><input type="checkbox" checked /><span>Pink</span></div>
  <div class="checkbox switch brown"><input type="checkbox" checked /><span>Brown</span></div>
  <div class="checkbox switch grey"><input type="checkbox" checked /><span>Grey</span></div>
  <div class="checkbox switch black"><input type="checkbox" checked /><span>Black</span></div>
</div>

<div class="flex flex-wrap gap-4">
                <div class="checkbox switch primary"><input type="checkbox" checked><span>Primary</span></div>
                <div class="checkbox switch positive"><input type="checkbox" checked><span>Positive</span></div>
                <div class="checkbox switch warning"><input type="checkbox" checked><span>Warning</span></div>
                <div class="checkbox switch negative"><input type="checkbox" checked><span>Negative</span></div>
                <div class="checkbox switch info"><input type="checkbox" checked><span>Info</span></div>
                <div class="checkbox switch red"><input type="checkbox" checked><span>Red</span></div>
                <div class="checkbox switch orange"><input type="checkbox" checked><span>Orange</span></div>
                <div class="checkbox switch yellow"><input type="checkbox" checked><span>Yellow</span></div>
                <div class="checkbox switch olive"><input type="checkbox" checked><span>Olive</span></div>
                <div class="checkbox switch green"><input type="checkbox" checked><span>Green</span></div>
                <div class="checkbox switch teal"><input type="checkbox" checked><span>Teal</span></div>
                <div class="checkbox switch blue"><input type="checkbox" checked><span>Blue</span></div>
                <div class="checkbox switch violet"><input type="checkbox" checked><span>Violet</span></div>
                <div class="checkbox switch purple"><input type="checkbox" checked><span>Purple</span></div>
                <div class="checkbox switch pink"><input type="checkbox" checked><span>Pink</span></div>
                <div class="checkbox switch brown"><input type="checkbox" checked><span>Brown</span></div>
                <div class="checkbox switch grey"><input type="checkbox" checked><span>Grey</span></div>
                <div class="checkbox switch black"><input type="checkbox" checked><span>Black</span></div>
            </div>

Plain Switch Colors (without icons)

Preview Code

Copy

<div class="flex flex-wrap gap-4">
  <div class="checkbox switch plain primary">
    <input type="checkbox" checked /><span>Primary</span>
  </div>
  <div class="checkbox switch plain positive">
    <input type="checkbox" checked /><span>Positive</span>
  </div>
  <div class="checkbox switch plain warning">
    <input type="checkbox" checked /><span>Warning</span>
  </div>
  <div class="checkbox switch plain negative">
    <input type="checkbox" checked /><span>Negative</span>
  </div>
  <div class="checkbox switch plain info"><input type="checkbox" checked /><span>Info</span></div>
  <div class="checkbox switch plain red"><input type="checkbox" checked /><span>Red</span></div>
  <div class="checkbox switch plain orange">
    <input type="checkbox" checked /><span>Orange</span>
  </div>
  <div class="checkbox switch plain yellow">
    <input type="checkbox" checked /><span>Yellow</span>
  </div>
  <div class="checkbox switch plain olive"><input type="checkbox" checked /><span>Olive</span></div>
  <div class="checkbox switch plain green"><input type="checkbox" checked /><span>Green</span></div>
  <div class="checkbox switch plain teal"><input type="checkbox" checked /><span>Teal</span></div>
  <div class="checkbox switch plain blue"><input type="checkbox" checked /><span>Blue</span></div>
  <div class="checkbox switch plain violet">
    <input type="checkbox" checked /><span>Violet</span>
  </div>
  <div class="checkbox switch plain purple">
    <input type="checkbox" checked /><span>Purple</span>
  </div>
  <div class="checkbox switch plain pink"><input type="checkbox" checked /><span>Pink</span></div>
  <div class="checkbox switch plain brown"><input type="checkbox" checked /><span>Brown</span></div>
  <div class="checkbox switch plain grey"><input type="checkbox" checked /><span>Grey</span></div>
  <div class="checkbox switch plain black"><input type="checkbox" checked /><span>Black</span></div>
</div>

<div class="flex flex-wrap gap-4">
                <div class="checkbox switch plain primary"><input type="checkbox" checked><span>Primary</span></div>
                <div class="checkbox switch plain positive"><input type="checkbox" checked><span>Positive</span></div>
                <div class="checkbox switch plain warning"><input type="checkbox" checked><span>Warning</span></div>
                <div class="checkbox switch plain negative"><input type="checkbox" checked><span>Negative</span></div>
                <div class="checkbox switch plain info"><input type="checkbox" checked><span>Info</span></div>
                <div class="checkbox switch plain red"><input type="checkbox" checked><span>Red</span></div>
                <div class="checkbox switch plain orange"><input type="checkbox" checked><span>Orange</span></div>
                <div class="checkbox switch plain yellow"><input type="checkbox" checked><span>Yellow</span></div>
                <div class="checkbox switch plain olive"><input type="checkbox" checked><span>Olive</span></div>
                <div class="checkbox switch plain green"><input type="checkbox" checked><span>Green</span></div>
                <div class="checkbox switch plain teal"><input type="checkbox" checked><span>Teal</span></div>
                <div class="checkbox switch plain blue"><input type="checkbox" checked><span>Blue</span></div>
                <div class="checkbox switch plain violet"><input type="checkbox" checked><span>Violet</span></div>
                <div class="checkbox switch plain purple"><input type="checkbox" checked><span>Purple</span></div>
                <div class="checkbox switch plain pink"><input type="checkbox" checked><span>Pink</span></div>
                <div class="checkbox switch plain brown"><input type="checkbox" checked><span>Brown</span></div>
                <div class="checkbox switch plain grey"><input type="checkbox" checked><span>Grey</span></div>
                <div class="checkbox switch plain black"><input type="checkbox" checked><span>Black</span></div>
            </div>

Soft Switch Variant

Preview Code

Copy

<div class="flex flex-wrap gap-4">
  <div class="checkbox switch soft primary">
    <input type="checkbox" checked /><span>Primary</span>
  </div>
  <div class="checkbox switch soft positive">
    <input type="checkbox" checked /><span>Positive</span>
  </div>
  <div class="checkbox switch soft warning">
    <input type="checkbox" checked /><span>Warning</span>
  </div>
  <div class="checkbox switch soft negative">
    <input type="checkbox" checked /><span>Negative</span>
  </div>
  <div class="checkbox switch soft info"><input type="checkbox" checked /><span>Info</span></div>
  <div class="checkbox switch soft red"><input type="checkbox" checked /><span>Red</span></div>
  <div class="checkbox switch soft orange">
    <input type="checkbox" checked /><span>Orange</span>
  </div>
  <div class="checkbox switch soft yellow">
    <input type="checkbox" checked /><span>Yellow</span>
  </div>
  <div class="checkbox switch soft olive"><input type="checkbox" checked /><span>Olive</span></div>
  <div class="checkbox switch soft green"><input type="checkbox" checked /><span>Green</span></div>
  <div class="checkbox switch soft teal"><input type="checkbox" checked /><span>Teal</span></div>
  <div class="checkbox switch soft blue"><input type="checkbox" checked /><span>Blue</span></div>
  <div class="checkbox switch soft violet">
    <input type="checkbox" checked /><span>Violet</span>
  </div>
  <div class="checkbox switch soft purple">
    <input type="checkbox" checked /><span>Purple</span>
  </div>
  <div class="checkbox switch soft pink"><input type="checkbox" checked /><span>Pink</span></div>
  <div class="checkbox switch soft brown"><input type="checkbox" checked /><span>Brown</span></div>
  <div class="checkbox switch soft grey"><input type="checkbox" checked /><span>Grey</span></div>
  <div class="checkbox switch soft black"><input type="checkbox" checked /><span>Black</span></div>
</div>

<div class="flex flex-wrap gap-4">
                <div class="checkbox switch soft primary"><input type="checkbox" checked><span>Primary</span></div>
                <div class="checkbox switch soft positive"><input type="checkbox" checked><span>Positive</span></div>
                <div class="checkbox switch soft warning"><input type="checkbox" checked><span>Warning</span></div>
                <div class="checkbox switch soft negative"><input type="checkbox" checked><span>Negative</span></div>
                <div class="checkbox switch soft info"><input type="checkbox" checked><span>Info</span></div>
                <div class="checkbox switch soft red"><input type="checkbox" checked><span>Red</span></div>
                <div class="checkbox switch soft orange"><input type="checkbox" checked><span>Orange</span></div>
                <div class="checkbox switch soft yellow"><input type="checkbox" checked><span>Yellow</span></div>
                <div class="checkbox switch soft olive"><input type="checkbox" checked><span>Olive</span></div>
                <div class="checkbox switch soft green"><input type="checkbox" checked><span>Green</span></div>
                <div class="checkbox switch soft teal"><input type="checkbox" checked><span>Teal</span></div>
                <div class="checkbox switch soft blue"><input type="checkbox" checked><span>Blue</span></div>
                <div class="checkbox switch soft violet"><input type="checkbox" checked><span>Violet</span></div>
                <div class="checkbox switch soft purple"><input type="checkbox" checked><span>Purple</span></div>
                <div class="checkbox switch soft pink"><input type="checkbox" checked><span>Pink</span></div>
                <div class="checkbox switch soft brown"><input type="checkbox" checked><span>Brown</span></div>
                <div class="checkbox switch soft grey"><input type="checkbox" checked><span>Grey</span></div>
                <div class="checkbox switch soft black"><input type="checkbox" checked><span>Black</span></div>
            </div>

Minimal Switches (with icons)

Preview Code

Copy

Accept terms and conditions

Enable notifications

Remember my preferences

<div class="space-y-4">
  <div class="checkbox switch minimal">
    <input type="checkbox" />
    <span>Accept terms and conditions</span>
  </div>

  <div class="checkbox switch minimal">
    <input type="checkbox" checked />
    <span>Enable notifications</span>
  </div>

  <div class="checkbox switch minimal">
    <input type="checkbox" />
    <span>Remember my preferences</span>
  </div>
</div>

Minimal Plain Switches (without icons)

Preview Code

Copy

Simple toggle option

Clean minimal design

Ultra minimalist

<div class="space-y-4">
  <div class="checkbox switch minimal plain">
    <input type="checkbox" />
    <span>Simple toggle option</span>
  </div>

  <div class="checkbox switch minimal plain">
    <input type="checkbox" checked />
    <span>Clean minimal design</span>
  </div>

  <div class="checkbox switch minimal plain">
    <input type="checkbox" />
    <span>Ultra minimalist</span>
  </div>
</div>

Minimal Switch Sizes

Preview Code

Copy

Tiny

Small

Default

Large

Big

<div class="flex items-center gap-6">
  <div class="checkbox switch minimal tiny">
    <input type="checkbox" checked />
    <span>Tiny</span>
  </div>

  <div class="checkbox switch minimal small">
    <input type="checkbox" checked />
    <span>Small</span>
  </div>

  <div class="checkbox switch minimal">
    <input type="checkbox" checked />
    <span>Default</span>
  </div>

  <div class="checkbox switch minimal large">
    <input type="checkbox" checked />
    <span>Large</span>
  </div>

  <div class="checkbox switch minimal big">
    <input type="checkbox" checked />
    <span>Big</span>
  </div>
</div>

Minimal Switch Colors

Preview Code

Copy

<div class="flex flex-wrap gap-4">
  <div class="checkbox switch minimal primary">
    <input type="checkbox" checked /><span>Primary</span>
  </div>
  <div class="checkbox switch minimal positive">
    <input type="checkbox" checked /><span>Positive</span>
  </div>
  <div class="checkbox switch minimal warning">
    <input type="checkbox" checked /><span>Warning</span>
  </div>
  <div class="checkbox switch minimal negative">
    <input type="checkbox" checked /><span>Negative</span>
  </div>
  <div class="checkbox switch minimal info"><input type="checkbox" checked /><span>Info</span></div>
  <div class="checkbox switch minimal red"><input type="checkbox" checked /><span>Red</span></div>
  <div class="checkbox switch minimal orange">
    <input type="checkbox" checked /><span>Orange</span>
  </div>
  <div class="checkbox switch minimal yellow">
    <input type="checkbox" checked /><span>Yellow</span>
  </div>
  <div class="checkbox switch minimal olive">
    <input type="checkbox" checked /><span>Olive</span>
  </div>
  <div class="checkbox switch minimal green">
    <input type="checkbox" checked /><span>Green</span>
  </div>
  <div class="checkbox switch minimal teal"><input type="checkbox" checked /><span>Teal</span></div>
  <div class="checkbox switch minimal blue"><input type="checkbox" checked /><span>Blue</span></div>
  <div class="checkbox switch minimal violet">
    <input type="checkbox" checked /><span>Violet</span>
  </div>
  <div class="checkbox switch minimal purple">
    <input type="checkbox" checked /><span>Purple</span>
  </div>
  <div class="checkbox switch minimal pink"><input type="checkbox" checked /><span>Pink</span></div>
  <div class="checkbox switch minimal brown">
    <input type="checkbox" checked /><span>Brown</span>
  </div>
  <div class="checkbox switch minimal grey"><input type="checkbox" checked /><span>Grey</span></div>
  <div class="checkbox switch minimal black">
    <input type="checkbox" checked /><span>Black</span>
  </div>
</div>

<div class="flex flex-wrap gap-4">
                <div class="checkbox switch minimal primary"><input type="checkbox" checked><span>Primary</span></div>
                <div class="checkbox switch minimal positive"><input type="checkbox" checked><span>Positive</span></div>
                <div class="checkbox switch minimal warning"><input type="checkbox" checked><span>Warning</span></div>
                <div class="checkbox switch minimal negative"><input type="checkbox" checked><span>Negative</span></div>
                <div class="checkbox switch minimal info"><input type="checkbox" checked><span>Info</span></div>
                <div class="checkbox switch minimal red"><input type="checkbox" checked><span>Red</span></div>
                <div class="checkbox switch minimal orange"><input type="checkbox" checked><span>Orange</span></div>
                <div class="checkbox switch minimal yellow"><input type="checkbox" checked><span>Yellow</span></div>
                <div class="checkbox switch minimal olive"><input type="checkbox" checked><span>Olive</span></div>
                <div class="checkbox switch minimal green"><input type="checkbox" checked><span>Green</span></div>
                <div class="checkbox switch minimal teal"><input type="checkbox" checked><span>Teal</span></div>
                <div class="checkbox switch minimal blue"><input type="checkbox" checked><span>Blue</span></div>
                <div class="checkbox switch minimal violet"><input type="checkbox" checked><span>Violet</span></div>
                <div class="checkbox switch minimal purple"><input type="checkbox" checked><span>Purple</span></div>
                <div class="checkbox switch minimal pink"><input type="checkbox" checked><span>Pink</span></div>
                <div class="checkbox switch minimal brown"><input type="checkbox" checked><span>Brown</span></div>
                <div class="checkbox switch minimal grey"><input type="checkbox" checked><span>Grey</span></div>
                <div class="checkbox switch minimal black"><input type="checkbox" checked><span>Black</span></div>
            </div>

Switch Group (Stacked)

Preview Code

Copy

Push Notifications

Location Services

Analytics & Reporting

Dark Mode

<div class="checkboxes">
  <div class="checkbox switch">
    <input type="checkbox" name="settings" value="notifications" checked />
    <span>Push Notifications</span>
  </div>
  <div class="checkbox switch">
    <input type="checkbox" name="settings" value="location" />
    <span>Location Services</span>
  </div>
  <div class="checkbox switch">
    <input type="checkbox" name="settings" value="analytics" checked />
    <span>Analytics & Reporting</span>
  </div>
  <div class="checkbox switch">
    <input type="checkbox" name="settings" value="darkmode" />
    <span>Dark Mode</span>
  </div>
</div>

Disabled States

Preview Code

Copy

Disabled Off

Disabled On

Disabled Plain

Disabled Minimal Off

Disabled Minimal On

<div class="flex items-center gap-6">
  <div class="checkbox switch">
    <input type="checkbox" disabled />
    <span>Disabled Off</span>
  </div>

  <div class="checkbox switch">
    <input type="checkbox" checked disabled />
    <span>Disabled On</span>
  </div>

  <div class="checkbox switch plain">
    <input type="checkbox" disabled />
    <span>Disabled Plain</span>
  </div>

  <div class="checkbox switch minimal">
    <input type="checkbox" disabled />
    <span>Disabled Minimal Off</span>
  </div>

  <div class="checkbox switch minimal">
    <input type="checkbox" checked disabled />
    <span>Disabled Minimal On</span>
  </div>
</div>

<div class="flex items-center gap-6">
                <div class="checkbox switch">
                    <input type="checkbox" disabled>
                    <span>Disabled Off</span>
                </div>
                
                <div class="checkbox switch">
                    <input type="checkbox" checked disabled>
                    <span>Disabled On</span>
                </div>
                
                <div class="checkbox switch plain">
                    <input type="checkbox" disabled>
                    <span>Disabled Plain</span>
                </div>
                
                <div class="checkbox switch minimal">
                    <input type="checkbox" disabled>
                    <span>Disabled Minimal Off</span>
                </div>
                
                <div class="checkbox switch minimal">
                    <input type="checkbox" checked disabled>
                    <span>Disabled Minimal On</span>
                </div>
            </div>

Switch Error State (Shows only when off)

Preview Code

Copy

Enable two-factor authentication

Accept cookies (error removed when on)

Note: Error styling automatically disappears when switch is turned on

<div class="space-y-4">
  <div class="checkbox switch error">
    <input type="checkbox" required />
    <span>Enable two-factor authentication</span>
  </div>

  <div class="checkbox switch error">
    <input type="checkbox" checked required />
    <span>Accept cookies (error removed when on)</span>
  </div>

  <div class="mt-4 text-sm text-gray-600">
    Note: Error styling automatically disappears when switch is turned on
  </div>
</div>