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>

Button Drawer