Checkbox

Default

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-4">
	<input checked="{true}" class="bw checkbox" type="checkbox" />
	<input class="success checkbox" type="checkbox" />
	<input checked="{true}" class="warn checkbox" type="checkbox" />
	<input class="danger checkbox" type="checkbox" />
</div>

<div className='flex gap-4'>
  <input defaultChecked={true}
    className='bw checkbox'
    type='checkbox' />
  <input className='success checkbox'
    type='checkbox' />
  <input defaultChecked={true}
    className='warn checkbox'
    type='checkbox' />
  <input className='danger checkbox'
    type='checkbox' />
</div>

Colored

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-4">
	<input checked="{true}" class="bw checkbox colored" type="checkbox" />
	<input class="success checkbox colored" type="checkbox" />
	<input checked="{true}" class="warn checkbox colored" type="checkbox" />
	<input class="danger checkbox colored" type="checkbox" />
</div>

<div className='flex gap-4'>
  <input defaultChecked={true}
    className='bw checkbox colored'
    type='checkbox' />
  <input className='success checkbox colored'
    type='checkbox' />
  <input defaultChecked={true}
    className='warn checkbox colored'
    type='checkbox' />
  <input className='danger checkbox colored'
    type='checkbox' />
</div>

Size

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-4">
	<input checked="{true}" class="success checkbox xs" type="checkbox" />
	<input checked="{true}" class="success checkbox sm" type="checkbox" />
	<input checked="{true}" class="success checkbox" type="checkbox" />
	<input checked="{true}" class="success checkbox lg" type="checkbox" />
	<input checked="{true}" class="success checkbox xl" type="checkbox" />
</div>

<div className='flex gap-4'>
  <input defaultChecked={true}
    className='success checkbox xs'
    type='checkbox' />
  <input defaultChecked={true}
    className='success checkbox sm'
    type='checkbox' />
  <input defaultChecked={true}
    className='success checkbox'
    type='checkbox' />
  <input defaultChecked={true}
    className='success checkbox lg'
    type='checkbox' />
  <input defaultChecked={true}
    className='success checkbox xl'
    type='checkbox' />
</div>

Disabled

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-4">
	<input
		checked="{true}"
		class="success checkbox"
		disabled="{true}"
		type="checkbox"
	/>
	<input class="success checkbox" disabled="{true}" type="checkbox" />
	<input
		checked="{true}"
		class="danger checkbox"
		disabled="{true}"
		type="checkbox"
	/>
	<input class="danger checkbox" disabled="{true}" type="checkbox" />
</div>

<div className='flex gap-4'>
  <input defaultChecked={true}
    className='success checkbox'
    disabled={true}
    type='checkbox' />
  <input className='success checkbox'
    disabled={true}
    type='checkbox' />
  <input defaultChecked={true}
    className='danger checkbox'
    disabled={true}
    type='checkbox' />
  <input className='danger checkbox'
    disabled={true}
    type='checkbox' />
</div>

Classes

Class Name	Description
checkbox	Wrapper htmlFor checkbox
colored	Set colored checkbox style
xs	Set extra small size
sm	Set small size
md	Set medium size
lg	Set large size
xl	Set extra large size

Button Divider