Select

Selects are used to select a single item in a list of many options.

Examples

To render a select, apply the class chi-select to a select.

Base

<div class="chi-form__item">
  <label class="chi-label" for="example-base">Label</label>
  <select class="chi-select" id="example-base">
    <option>Base Select</option>
  </select>
</div>

Disabled

<div class="chi-form__item">
  <label class="chi-label" for="example-disabled">Label</label>
  <select class="chi-select" id="example-disabled" disabled>
    <option>Disabled Select</option>
  </select>
</div>

Invalid

Selects support the semantic class modifier -danger for indicating an invalid selection.

This is an invalid label
<div class="chi-form__item">
  <label class="chi-label" for="example-invalid">Label</label>
  <select class="chi-select -danger" id="example-invalid">
    <option>Invalid Select</option>
  </select>
  <div class="chi-label -status -danger">This is an invalid label</div>
</div>

Sizes

Selects support the following sizes: -sm, -md, -lg, -xl. The default size is -md.

<!-- sm -->
<div class="chi-form__item">
  <label class="chi-label" for="example-size-sm">Label</label>
  <select class="chi-select -sm" id="example-size-sm">
    <option>-sm Select</option>
  </select>
</div>

<!-- md -->
<div class="chi-form__item">
  <label class="chi-label" for="example-size-md">Label</label>
  <select class="chi-select -md" id="example-size-md">
    <option>-md Select</option>
  </select>
</div>

<!-- lg -->
<div class="chi-form__item">
  <label class="chi-label" for="example-size-lg">Label</label>
  <select class="chi-select -lg" id="example-size-lg">
    <option>-lg Select</option>
  </select>
</div>

<!-- xl -->
<div class="chi-form__item">
  <label class="chi-label" for="example-size-xl">Label</label>
  <select class="chi-select -xl" id="example-size-xl">
    <option>-xl Select</option>
  </select>
</div>

Floating labels

Floating labels are a solution to keep the placeholder visible when no label is attached to the select. Chi only supports floating labels on -lg and -xl selects.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div id="floating-label-lg" class="chi-input__wrapper -floating-label">
  <select class="chi-select -lg" id="floating-label-select-lg">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <label for="floating-label-select-lg">Placeholder text</label>
</div>

<div id="floating-label-xl" class="chi-input__wrapper -floating-label">
  <select class="chi-select -xl" id="floating-label-select-xl">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <label for="floating-label-select-xl">Placeholder text</label>
</div>

<script>chi.floatingLabel(document.querySelectorAll('.-floating-label'));</script>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon