Select

Select component is a wrapper around the native <select> element. It provides a way to style the select element and add some extra functionality like search.

Basic usage

Carrot

Tomato

Potato

Onion

Garlic

Cucumber

Pumpkin

<bl-select>
    <div data-value="v1">Carrot</div>
    <div data-value="v2">Tomato</div>
    <div data-value="v3">Potato</div>
    <div data-value="v4">Onion</div>
    <div data-value="v5">Garlic</div>
    <div data-value="v6">Cucumber</div>
    <div data-value="v7">Pumpkin</div>
</bl-select>

Searchable select

Carrot

Tomato

Potato

Onion

Garlic

Cucumber

Pumpkin

<bl-select searchable>
    ...
</bl-select>

Clearable select

Carrot

Tomato

Potato

Onion

Garlic

Cucumber

Pumpkin

<bl-select searchable clearable>
    ...
</bl-select>

Select multiple values

Carrot

Tomato

Potato

Onion

Garlic

Cucumber

Pumpkin

<bl-select searchable clearable multiple>
    ...
</bl-select>

Custom options

FD

François Dupont

Director

AL

Albert Levert

Consultant

AF

Alain Fini

Developer

JB

Jean Bon

Chef

HTML

<bl-select name="my-custom-select" placeholder="Choose a member..." clearable searchable>
  <div data-value="0" class="member">
    <div class="member-avatar" style="background-color: lightcoral">
      <span>FD</span>
    </div>
    <div>
      <div class="member-name">François Dupont</div>
      <div class="member-job">Director</div>
    </div>
  </div>
  <div data-value="0" class="member">
    <div class="member-avatar" style="background-color: lightgreen">
      <span>AL</span>
    </div>
    <div>
      <div class="member-name">Albert Levert</div>
      <div class="member-job">Consultant</div>
    </div>
  </div>
  <div data-value="0" class="member">
    <div class="member-avatar" style="background-color: lightblue">
      <span>AF</span>
    </div>
    <div>
      <div class="member-name">Alain Fini</div>
      <div class="member-job">Developer</div>
    </div>
  </div>
  <div data-value="0" class="member">
    <div class="member-avatar" style="background-color: lightpink">
      <span>JB</span>
    </div>
    <div>
      <div class="member-name">Jean Bon</div>
      <div class="member-job">Chef</div>
    </div>
  </div>
</bl-select>

CSS

.member {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.member-avatar {
  width: 40px;
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  font-weight: 600;
}

.member-name {
  font-weight: 700;
}

.member-job {
  color: #555;
}

Disabled select

Carrot

Tomato

Potato

Onion

Garlic

Cucumber

Pumpkin

<bl-select disabled>
    ...
</bl-select>