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

## Form Switch

- Forms
- Form Switch

## Basic Switch

Code

The Switch component is used as an alternative for the checkbox. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label. Check out code for detail of usage.

Default Primary Secondary Info Success Warning Error

      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-slate-500 checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-navy-400 dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Default</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Primary</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-secondary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-secondary-light dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Secondary</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-info checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Info</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-success checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Success</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-warning checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Warning</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-error checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Error</span>
      </label>

## Squircle Switch

Code

The Switch component can have a squircle shape. Check out code for detail of usage.55

Default Primary Secondary Info Success Warning Error

      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:bg-slate-500 checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-navy-400 dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Default</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Primary</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:bg-secondary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-secondary-light dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Secondary</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:!bg-info checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Info</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:!bg-success checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Success</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:!bg-warning checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Warning</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:!bg-error checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Error</span>
      </label>

## Outline Switch

Code

The Switch can be outlied. Check out code for detail of usage. Check out code for detail of usage.

Default Primary Secondary Info Success Warning Error

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

## Outline Filled

Code

The Switch 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
          class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-slate-100 before:rounded-full before:bg-slate-300 checked:border-slate-500 checked:before:bg-slate-500 dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-400 dark:checked:border-navy-200 dark:checked:before:bg-navy-200"
          type="checkbox"
        />
        <span>Default</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-slate-100 before:rounded-full before:bg-slate-300 checked:border-primary checked:before:bg-primary dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-400 dark:checked:border-accent dark:checked:before:bg-accent"
          type="checkbox"
        />
        <span>Primary</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-slate-100 before:rounded-full before:bg-slate-300 checked:border-secondary checked:before:bg-secondary dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-400 dark:checked:border-secondary-light dark:checked:before:bg-secondary-light"
          type="checkbox"
        />
        <span>Secondary</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-slate-100 before:rounded-full before:bg-slate-300 checked:!border-info checked:before:!bg-info dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-400"
          type="checkbox"
        />
        <span>Info</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-slate-100 before:rounded-full before:bg-slate-300 checked:!border-success checked:before:!bg-success dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-400"
          type="checkbox"
        />
        <span>Success</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-slate-100 before:rounded-full before:bg-slate-300 checked:!border-warning checked:before:!bg-warning dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-400"
          type="checkbox"
        />
        <span>Warning</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-slate-100 before:rounded-full before:bg-slate-300 checked:!border-error checked:before:!bg-error dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-400"
          type="checkbox"
        />
        <span>Error</span>
      </label>

## Outline Squircle

Code

The outline Switch component can have a squircle 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
          class="form-switch is-outline h-5 w-10 rounded-lg border border-slate-400/70 bg-transparent before:rounded-md before:bg-slate-300 checked:border-slate-500 checked:before:bg-slate-500 dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-navy-200 dark:checked:before:bg-navy-200"
          type="checkbox"
        />
        <span>Default</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch is-outline h-5 w-10 rounded-lg border border-slate-400/70 bg-transparent before:rounded-md before:bg-slate-300 checked:border-primary checked:before:bg-primary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-accent dark:checked:before:bg-accent"
          type="checkbox"
        />
        <span>Primary</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch is-outline h-5 w-10 rounded-lg border border-slate-400/70 bg-transparent before:rounded-md before:bg-slate-300 checked:border-secondary checked:before:bg-secondary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-secondary-light dark:checked:before:bg-secondary-light"
          type="checkbox"
        />
        <span>Secondary</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch is-outline h-5 w-10 rounded-lg border border-slate-400/70 bg-transparent before:rounded-md before:bg-slate-300 checked:!border-info checked:before:!bg-info dark:border-navy-400 dark:before:bg-navy-300"
          type="checkbox"
        />
        <span>Info</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch is-outline h-5 w-10 rounded-lg border border-slate-400/70 bg-transparent before:rounded-md before:bg-slate-300 checked:!border-success checked:before:!bg-success dark:border-navy-400 dark:before:bg-navy-300"
          type="checkbox"
        />
        <span>Success</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch is-outline h-5 w-10 rounded-lg border border-slate-400/70 bg-transparent before:rounded-md before:bg-slate-300 checked:!border-warning checked:before:!bg-warning dark:border-navy-400 dark:before:bg-navy-300"
          type="checkbox"
        />
        <span>Warning</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch is-outline h-5 w-10 rounded-lg border border-slate-400/70 bg-transparent before:rounded-md before:bg-slate-300 checked:!border-error checked:before:!bg-error dark:border-navy-400 dark:before:bg-navy-300"
          type="checkbox"
        />
        <span>Error</span>
      </label>

## Disabled Switch

Code

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

Default Primary

      <label class="inline-flex items-center space-x-2">
        <input
          disabled
          class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-slate-500 checked:before:bg-white disabled:pointer-events-none disabled:select-none disabled:opacity-60 dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-navy-400 dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Default</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          checked
          disabled
          class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white disabled:pointer-events-none disabled:select-none disabled:opacity-60 dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Primary</span>
      </label>

## Switch Size

Code

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

Small Normal Large

      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-3.5 w-7 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
          type="checkbox"
        />
        <span class="text-xs">Small</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>Normal</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          class="form-switch h-7 w-14 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
          type="checkbox"
        />
        <span class="text-base">Large</span>
      </label>

## Thumb Size

Code

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

label label label label label

      <label class="inline-flex items-center space-x-2">
        <input
          checked
          class="form-switch h-5 w-10 rounded-full bg-slate-300 [--thumb-border:6px] before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>label</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          checked
          class="form-switch h-5 w-10 rounded-full bg-slate-300 [--thumb-border:5px] before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>label</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          checked
          class="form-switch h-5 w-10 rounded-full bg-slate-300 [--thumb-border:4px] before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>label</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          checked
          class="form-switch h-5 w-10 rounded-full bg-slate-300 [--thumb-border:3px] before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>label</span>
      </label>
      <label class="inline-flex items-center space-x-2">
        <input
          checked
          class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>label</span>
      </label>

## Multipie Switch

Code

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

Orange Raspberry Melon

Value:

      <div x-data="{selected:[]}">
        <div class="grid grid-cols-2 place-items-start gap-6 sm:grid-cols-3">
          <label class="inline-flex items-center space-x-2">
            <input
              value="Orange"
              x-model="selected"
              class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
              type="checkbox"
            />
            <span>Orange</span>
          </label>
          <label class="inline-flex items-center space-x-2">
            <input
              value="Raspberry"
              x-model="selected"
              class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
              type="checkbox"
            />
            <span>Raspberry</span>
          </label>
          <label class="inline-flex items-center space-x-2">
            <input
              value="Melon"
              x-model="selected"
              class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
              type="checkbox"
            />
            <span>Melon</span>
          </label>
        </div>
        <p class="mt-2">Value: <span x-text="selected"></span></p>
      </div>

## Single Switch

Code

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

Option

Value:

      <div x-data="{active:true}" class="mt-5">
        <label class="inline-flex items-center space-x-2">
          <input
            x-model="active"
            class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
            type="checkbox"
          />
          <span>Option</span>
        </label>
        <p class="mt-2">Value: <span x-text="active"></span></p>
      </div>