Chi Documentation

Select

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

Examples

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

Base

<select class="a-input">
  <option>Base Select</option>
</select>

Pill

Use the -pill modifier class to render a select with a more pronounced border-radius.

<select class="a-input -pill">
  <option>Base Select</option>
</select>

Disabled

<select class="a-input" disabled>
  <option>Disabled Select</option>
</select>

Danger

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

<select class="a-input -danger">
  <option>Danger Select</option>
</select>

Additional Sizes

Selects offer two size modifiers, -small and -large.

Small

<select class="a-input -small">
  <option>Small Select</option>
</select>

Large

<select class="a-input -large">
  <option>Large Select</option>
</select>