Kanban

Analytics

Chat

Files

Crypto

Banking

Todo

Orders

Recent

View All
Chat App
File Manager App
Email App
Kanban Board
Todo App
Crypto Dashboard
Banking Dashboard
Analytics Dashboard
Influencer Dashboard

25 May, 2022

Projects

Activity

## Banking cards

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

## Pinned Apps

Kanban

Analytics

Chat

Files

Banking

11.3 hr

Working Hours

71%

13 /22

Completed tasks

49%

## Stock Market

## BTC

Bitcoin

60.33$

+3.3%

## SOL

Solana

20.56$

+4.11%

## Latest News

What is Tailwind CSS?

John D.

2 min read

Tailwind CSS Card Example

Travis F.

5 min read

10 Tips for Making a Good Camera Even Better

Alfredo E .

4 min read

## Settings

Dark Mode Monochrome Mode

35GB of 1TB

Upgrade

14

Pending

36

Completed

143

In Progress

279

Total

LMS App Design

Updated at 7 Sep

25%

jd

Store Dashboard

Updated at 11 Sep

49%

dv

Chat Mobile App

Updated at 19 Sep

13%

gt

NFT Marketplace App

Updated at 5 Sep

78%

jd

Today

6hr 22m

1. User Photo Changed

   12 minute ago

   John Doe changed his avatar photo

2. Images Added

   1 hour ago

   Mores Clarke added new image gallery

   Category: #Tag #Category

3. Design Completed

   3 hours ago

   Robert Nolan completed the design of the CRM application

   File_final.fig
   UI/UX CRM Dashboard

4. ER Diagram

   a day ago

   Team completed the ER diagram app

   Members:

   jd

5. Weekly Report

   a day ago

   The weekly report was uploaded

## Checkbox

- Forms
- 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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-sm 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>

## Checkbox Model

Code

Model allows you to bind the value of an input element to data Check out code for detail of usage.

Apple PineApple Strawberry Orange

Value:

          <div class="mt-5" x-data="{selectedFruits: ['apple']}">
        <div class="inline-space">
          <label class="inline-flex items-center space-x-2">
            <input
              x-model="selectedFruits"
              value="apple"
              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>Apple</p>
          </label>
          <label class="inline-flex items-center space-x-2">
            <input
              x-model="selectedFruits"
              value="pineapple"
              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>PineApple</p>
          </label>
          <label class="inline-flex items-center space-x-2">
            <input
              x-model="selectedFruits"
              value="strawberry"
              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>Strawberry</p>
          </label>
          <label class="inline-flex items-center space-x-2">
            <input
              x-model="selectedFruits"
              value="orange"
              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>Orange</p>
          </label>
        </div>
        <p>Value: <span x-text="selectedFruits"></span></p>
      </div>