Selects are used to select a single item in a list of many options.
To render a select, apply the class a-input
to a select
.
<select class="a-input">
<option>Base Select</option>
</select>
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>
<select class="a-input" disabled>
<option>Disabled Select</option>
</select>
Selects support the validation class modifier -danger
for indicating
an invalid selection.
<select class="a-input -danger">
<option>Danger Select</option>
</select>
Selects offer two size modifiers, -small
and -large
.
<select class="a-input -small">
<option>Small Select</option>
</select>
<select class="a-input -large">
<option>Large Select</option>
</select>