Lineone - From 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 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+ 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>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Select

Basic Select

Rounded Select

Filled Select

Select Size

Disabled Select

Multipie Select

Select Model

Multipie Select Model