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

## Select

- Forms
- Select

## Basic Select

Code

The `<select>` HTML element represents a control that provides a menu of options. Check out code for detail of usage.

What type of event is it?

      <label class="block">
        <span>What type of event is it?</span>
        <select
          class="form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
        >
          <option>Corporate event</option>
          <option>Wedding</option>
          <option>Birthday</option>
          <option>Other</option>
        </select>
      </label>

## Rounded Select

Code

Select can have a rounded shape. To do this, you should use the `rounded-full` utility. Check out code for detail of usage.

What type of event is it?

      <label class="block">
        <span>What type of event is it?</span>
        <select
          class="form-select mt-1.5 w-full rounded-full border border-slate-300 bg-white px-4 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
        >
          <option>Corporate event</option>
          <option>Wedding</option>
          <option>Birthday</option>
          <option>Other</option>
        </select>
      </label>

## Filled Select

Code

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

What type of event is it?

      <label class="block">
        <span>What type of event is it?</span>
        <select
          class="form-select mt-1.5 w-full rounded-lg bg-slate-150 px-3 py-2 ring-primary/50 hover:bg-slate-200 focus:ring-3 dark:bg-navy-900/90 dark:ring-accent/50 dark:hover:bg-navy-900 dark:focus:bg-navy-900"
        >
          <option>Corporate event</option>
          <option>Wedding</option>
          <option>Birthday</option>
          <option>Other</option>
        </select>
      </label>

## Select Size

Code

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

What type of event is it?
What type of event is it?
What type of event is it?

      <label class="block">
        <span>What type of event is it?</span>
        <select
          class="form-select mt-1 h-8 w-full rounded-lg border border-slate-300 bg-white px-2.5 text-xs-plus hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
        >
          <option>Corporate event</option>
          <option>Wedding</option>
          <option>Birthday</option>
          <option>Other</option>
        </select>
      </label>
      <label class="block">
        <span>What type of event is it?</span>
        <select
          class="form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
        >
          <option>Corporate event</option>
          <option>Wedding</option>
          <option>Birthday</option>
          <option>Other</option>
        </select>
      </label>
      <label class="block">
        <span>What type of event is it?</span>
        <select
          class="form-select mt-1 h-12 w-full rounded-lg border border-slate-300 bg-white px-2.5 text-base hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
        >
          <option>Corporate event</option>
          <option>Wedding</option>
          <option>Birthday</option>
          <option>Other</option>
        </select>
      </label>

## Disabled Select

Code

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

What type of event is it?

      <label class="block">
        <span>What type of event is it?</span>
        <select
          disabled
          class="form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary disabled:pointer-events-none disabled:select-none disabled:border-none disabled:bg-zinc-100 dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent dark:disabled:bg-navy-600"
        >
          <option>Corporate event</option>
          <option>Wedding</option>
          <option>Birthday</option>
          <option>Other</option>
        </select>
      </label>

## Multipie Select

Code

The `multiple` attribute indicates that multiple options can be selected in the list. Check out code for detail of usage.

What type of event is it?

      <label class="block">
        <span>What type of event is it?</span>
        <select
          multiple
          class="form-multiselect mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
        >
          <option>Corporate event</option>
          <option selected>Wedding</option>
          <option>Birthday</option>
          <option>Other</option>
        </select>
      </label>

## Select Model

Code

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

What type of event is it?

Value:

      <div x-data="{selectedItem:'item_1'}">
        <label class="block">
          <span>What type of event is it?</span>
          <select
            x-model="selectedItem"
            class="form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
          >
            <option value="item_1">Corporate event</option>
            <option value="item_2">Wedding</option>
            <option value="item_3">Birthday</option>
            <option value="item_4">Other</option>
          </select>
        </label>
        <p class="mt-2">Value: <span x-text="selectedItem"></span></p>
      </div>

## Multipie Select Model

Code

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

What type of event is it?

Value:

      <label class="block">
        <span>What type of event is it?</span>
        <select
          multiple
          x-model="selectedItem"
          class="form-multiselect mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
        >
          <option value="item_1">Corporate event</option>
          <option value="item_2">Wedding</option>
          <option value="item_3">Birthday</option>
          <option value="item_4">Other</option>
        </select>
      </label>
      <p class="mt-1">Value: <span x-text="selectedItem"></span></p>