复选框

默认

演示

代码

HTML

代码

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>

彩色样式

演示

代码

HTML

代码

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>

尺寸

演示

代码

HTML

代码

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>

禁用状态

演示

代码

HTML

代码

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>

类名表

类名	描述
checkbox	用于复选框的包装
colored	设置复选框彩色样式
xs	设置超小尺寸
sm	设置较小尺寸
md	设置中等尺寸
lg	设置较大尺寸
xl	设置超大尺寸

按钮分隔线