Logo
hummingbird

Select

The select component allows users to choose from a list of options.

Class Name Type Description
form-select Component A basic select field.
form-select-fill Component A filled select field.
form-label Component Form label
form-field Component Container for labels and inputs.
form-select-secondary Color Secondary color.
form-select-info Color Info color.
form-select-success Color Success color.
form-select-warning Color Warning color.
form-select-sm Size Small select field.
default Size Medium size (default)
form-select-lg Size Large select field.
is-valid Modifier Valid state
is-invalid Modifier Invalid state
Basic Select

The Basic Select component provides a simple select field with two variations: Filled and Outlined.

HTML

<select class="form-select" aria-label="Default outlined example">
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="form-select-fill" aria-label="Default filled example">
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
Select with label

The Select component can be used with a label for better accessibility.

HTML

<div class="form-field">
  <label class="form-label">Options</label>
  <select class="form-select" aria-label="Outlined example with label">
    <option selected>Select option</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
<div class="form-field">
  <label class="form-label">Options</label>
  <select class="form-select-fill" aria-label="Filled example with label">
    <option selected>Select option</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
Sizing

Set heights using classes like .form-select-sm and .form-select-lg for small and large select fields. Default is medium.

HTML

<select class="form-select form-select-sm" aria-label="Outlined small">
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="form-select" aria-label="Outlined medium">
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="form-select form-select-lg" aria-label="Outlined large">
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="form-select-fill form-select-sm" aria-label="Filled small">
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="form-select-fill" aria-label="Filled medium">
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="form-select-fill form-select-lg" aria-label="Filled large">
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
Color Variants

Different colors become visible while the select is focused. By default, the select field uses the primary color. Use additional utility classes to modify the focus color. Like:

  • .form-select-secondary
  • .form-select-success

HTML

<select class="form-select form-select-secondary" aria-label="Outlined secondary">
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="form-select form-select-success" aria-label="Outlined success">
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="form-select-fill form-select-secondary" aria-label="Filled secondary">
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="form-select-fill form-select-success" aria-label="Filled success">
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
Disabled

Make select fields appear disabled by adding the disabled attribute.

HTML

<select class="form-select" aria-label="Outlined disabled" disabled>
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="form-select-fill" aria-label="Filled disabled" disabled>
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
Validation

Indicate validation states by adding the .is-valid class for success state and .is-invalid class for error state to input fields.

HTML

<select class="form-select is-valid" aria-label="Outlined invalid">
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="form-select-fill is-valid" aria-label="Filled invalid">
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="form-select is-invalid" aria-label="Outlined invalid">
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="form-select-fill is-invalid" aria-label="Filled invalid">
  <option selected>Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
CSS Variables

The form select component is built using a set of CSS variables. These variables provide flexibility for customizing styles globally or locally.

Global variables

Global variables apply shared styles across buttons, inputs, and selects. Updating these will affect all related components.

/* Used across button, form-control, select */
--input-btn-font-size: var(--text-sm);
--input-btn-radius: var(--radius-lg);
--input-btn-padding-x: --spacing(4);
--input-btn-padding-y: --spacing(1.75);
--input-btn-line-height: 1.5;
--input-btn-border-width: 1px;

/* Used across input and form-select */
--input-label-color: var(--text-color-highlight);
--input-bg: var(--background-color-muted);
--input-color: var(--text-color-default);
--input-border-color: var(--border-color-base);
--input-disabled-bg: var(--background-color-highlight);
--input-hover-bg: var(--background-color-highlight);
--input-focus-bg: var(--color-primary-lighter);
--input-hover-border-color: var(--text-color-emphasis);
--input-focus-border-color: var(--color-primary);
--input-disabled-border-color: var(--border-color-base);
Local variables

Local variables apply only to form-select, allowing fine-grained control over their appearance without affecting other elements.

.form-select {
  --form-select-font-size: var(--input-btn-font-size);
  --form-select-radius: var(--input-btn-radius);
  --form-select-padding-x: var(--input-btn-padding-x);
  --form-select-padding-y: var(--input-btn-padding-y);
  --form-select-line-height: var(--input-btn-line-height);
  --form-select-border-width: var(--input-btn-border-width);
  --form-select-padding-right: --spacing(9);
  --form-select-bg-size: --spacing(4) --spacing(3);
  --form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%231B2124' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
}

.form-select-fill {
  --form-select-font-size: var(--input-btn-font-size);
  --form-select-radius: var(--input-btn-radius);
  --form-select-padding-x: var(--input-btn-padding-x);
  --form-select-padding-y: var(--input-btn-padding-y);
  --form-select-line-height: var(--input-btn-line-height);
  --form-select-border-width: var(--input-btn-border-width);
  --form-select-padding-right: --spacing(9);
  --form-select-bg-size: --spacing(4) --spacing(3);
  --form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%231B2124' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
  --input-border-color: transparent;
}