Components
Version 2.0

Checkbox

Muestra un diálogo de alerta con un mensaje opcional, y aguardará hasta que el usuario cierre la ventana de diálogo.

Import

Example code
import Checkbox from 'components/@ui/checkbox'

Usage

Example code
<Checkbox

  id='check1'

  name='check1'

/>

With label

Example code
<Checkbox

  id='withLabel'

  name='withLabel'

  label='Label'

/>

Large content

Example code
<Checkbox

  id='withLargeContent'

  name='withLargeContent'

  label='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'

/>

Sizes

Example code
function Example(){

  const list = ['sm', 'md', 'lg', 'xl']

  return (

    <div className='flex items-center space-x-2'>

      {list.map((item, index) => (

        <Checkbox

          key={index}

          id={item}

          name={item}

          size={item}

          value={item}

          checked={item}

        />

      ))}

    </div>

  )

}

Default checked

Example code
<Checkbox

  id='checkbox'

  name='checkbox'

  checked={true}

/>

Disabled

Example code
<>

  <Checkbox

    id='checkbox'

    name='checkbox'

    checked={true}

    disabled

  />

  <Checkbox

    id='checkbox'

    name='checkbox'

    disabled

  />

</>
Example code
<Checkbox

  id='withLabelDisabled'

  name='withLabelDisabled'

  disabled

  label='Label'

/>

Cancel ripple efect

Example code
<Checkbox

  id='cancelRipple'

  name='cancelRipple'

  ripple={false}

/>