Select
Examples
To render a select, apply the class chi-input
to a select
.
Base
<div class="chi-form__item">
<label class="chi-label" for="example-base">Label</label>
<select class="chi-input" 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-input" 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-input -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-input -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-input -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-input -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-input -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-input -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-input -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>