Select

Select input component

Properties#

Features#

default#

<!-- single select -->
<label class="select-group">
  <select class="select">
    <option disabled>Choose one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</label>

<!-- multiple select -->
<label class="select-group">
  <select class="select" multiple>
    <option disabled>Choose one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</label>

disabled#

<!-- single select disabled -->
<label class="select-group">
  <select class="select disabled" disabled>
    <option disabled>Choose one</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</label>

<!-- multiple select disabled -->
<label class="select-group">
  <select class="select disabled" multiple disabled>
    <option disabled>Choose one</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</label>

underline#

<label class="select-group">
  <select class="select border-b border-solid border-gray-300 focus:border-blue-500 w-48">
    <option disabled>Choose one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</label>

outline#

<label class="select-group">
  <select class="select px-2 rounded border border-solid border-gray-300 focus:border-blue-500 w-48">
    <option disabled>Choose one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</label>