Lineone - From Checkbox

Basic Checkbox

Code

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many Check out code for detail of usage.

Default Primary Secondary Info Success Warning Error

                
      <label class="inline-flex items-center space-x-2">
    <input
      checked
      class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:checked:bg-navy-400"
      type="checkbox"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:checked:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      type="checkbox"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
      type="checkbox"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
      type="checkbox"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
      type="checkbox"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
      type="checkbox"
    />
    <p>Error</p>
  </label>

Filled Checkbox

Code

The checkbox component can be filled. Check out code for detail of usage.

Default Primary Secondary Info Success Warning Error

                    
      <label class="inline-flex items-center space-x-2">
    <input
      checked
      class="form-checkbox is-basic size-5 rounded bg-slate-100 border-slate-400/70 checked:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-navy-400 dark:checked:border-navy-400"
      type="checkbox"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded bg-slate-100 border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded bg-slate-100 border-slate-400/70 checked:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      type="checkbox"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded bg-slate-100 border-slate-400/70 checked:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:bg-navy-900 dark:border-navy-500"
      type="checkbox"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded bg-slate-100 border-slate-400/70 checked:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:bg-navy-900 dark:border-navy-500"
      type="checkbox"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded bg-slate-100 border-slate-400/70 checked:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:bg-navy-900 dark:border-navy-500"
      type="checkbox"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded bg-slate-100 border-slate-400/70 checked:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:bg-navy-900 dark:border-navy-500"
      type="checkbox"
    />
    <p>Error</p>
  </label>

Circle Checkbox

Code

The checkbox component can have a circle shape. Check out code for detail of usage

Default Primary Secondary Info Success Warning Error

                
      <label class="inline-flex items-center space-x-2">
    <input
      checked
      class="form-checkbox is-basic size-5 rounded-full border-slate-400/70 checked:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:checked:bg-navy-400"
      type="checkbox"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-full border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-full border-slate-400/70 checked:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:checked:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      type="checkbox"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-full border-slate-400/70 checked:bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
      type="checkbox"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-full border-slate-400/70 checked:bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
      type="checkbox"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-full border-slate-400/70 checked:bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
      type="checkbox"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-full border-slate-400/70 checked:bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
      type="checkbox"
    />
    <p>Error</p>
  </label>

Outline Checkbox

Code

The checkbox component can be outtlined. Check out code for detail of usage.

Default Primary Secondary Info Success Warning Error

                
      <label class="inline-flex items-center space-x-2">
    <input
      checked
      class="form-checkbox is-outline size-5 rounded border-slate-400/70 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:before:bg-navy-200 dark:checked:border-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
      type="checkbox"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      type="checkbox"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
      type="checkbox"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
      type="checkbox"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded border-slate-400/70 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
      type="checkbox"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded border-slate-400/70 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
      type="checkbox"
    />
    <p>Error</p>
  </label>

Outline Filled

Code

The checkbox component can be outlined and filled. Check out code for detail of usage.

Default Primary Secondary Info Success Warning Error

                    
      <label class="inline-flex items-center space-x-2">
    <input
      checked
      class="form-checkbox is-outline size-5 rounded bg-slate-100 border-slate-400/70 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:bg-navy-900 dark:border-navy-500 dark:before:bg-navy-200 dark:checked:border-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
      type="checkbox"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded bg-slate-100 border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded bg-slate-100 border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:bg-navy-900 dark:border-navy-500 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      type="checkbox"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded bg-slate-100 border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:bg-navy-900 dark:border-navy-500"
      type="checkbox"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded bg-slate-100 border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:bg-navy-900 dark:border-navy-500"
      type="checkbox"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded bg-slate-100 border-slate-400/70 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:bg-navy-900 dark:border-navy-500"
      type="checkbox"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded bg-slate-100 border-slate-400/70 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:bg-navy-900 dark:border-navy-500"
      type="checkbox"
    />
    <p>Error</p>
  </label>

Outline Circle

Code

The checkbox component can have a circle shape. Check out code for detail of usage.

Default Primary Secondary Info Success Warning Error

                
      <label class="inline-flex items-center space-x-2">
    <input
      checked
      class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:before:bg-navy-200 dark:checked:border-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
      type="checkbox"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      type="checkbox"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
      type="checkbox"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
      type="checkbox"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
      type="checkbox"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
      type="checkbox"
    />
    <p>Error</p>
  </label>

Disabled Checkbox

Code

The checkbox have their own style when disabled. Check out code for detail of usage.

Unchecked Checked

                
      <label class="inline-flex items-center space-x-2">
    <input
      disabled
      class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary disabled:pointer-events-none disabled:opacity-60 disabled:border-slate-300 dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent dark:disabled:border-navy-450"
      type="checkbox"
    />
    <p>Unchecked</p>
  </label>

  <label class="inline-flex items-center space-x-2">
    <input
      disabled
      checked
      class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary disabled:pointer-events-none disabled:opacity-60 disabled:border-slate-300 dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent dark:disabled:border-navy-450"
      type="checkbox"
    />
    <p>Checked</p>
  </label>

Checkbox Size

Code

The checkbox component can have various sizes. Check out code for detail of usage.

1 2 3 4 5 6

                
      <label class="inline-flex items-center space-x-2">
    <input
      checked
      class="form-checkbox is-basic size-3 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>1</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-3.5 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>2</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>3</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>4</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>5</p>
  </label>
  <label class="inline-flex items-center space-x-2">
    <input
      class="form-checkbox is-basic size-6 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>6</p>
  </label>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Checkbox

Basic Checkbox

Filled Checkbox

Circle Checkbox

Outline Checkbox

Outline Filled

Outline Circle

Disabled Checkbox

Checkbox Size