Select

Select components allow users to choose one option from a dropdown list.

Usage

Use select when you have 4+ options. For fewer options, consider radio buttons.

Basic Select

Choose an optionOption 1Option 2Option 3

<select class="df-select">
  <option value="">Choose an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

With Label

CountrySelect a countryUnited StatesCanadaUnited KingdomAustralia

<label class="df-label" for="country-select">Country</label>
<select id="country-select" class="df-select">
  <option value="">Select a country</option>
  <option value="us">United States</option>
  <!-- more options -->
</select>

Sizes

Small selectMedium selectLarge select

<select class="df-select df-select--sm">...</select>
<select class="df-select">...</select>
<select class="df-select df-select--lg">...</select>

States

Disabled

Disabled select

<select class="df-select" disabled>...</select>

Error State

Please select an optionThis field is required

<select class="df-select df-select--error">...</select>
<span class="df-select-error">This field is required</span>

Option Groups

Select a vehicleSedanSUVCoupeSportCruiser

<select class="df-select">
  <option value="">Select a vehicle</option>
  <optgroup label="Cars">
    <option value="sedan">Sedan</option>
    <option value="suv">SUV</option>
  </optgroup>
  <optgroup label="Motorcycles">
    <option value="sport">Sport</option>
  </optgroup>
</select>

Accessibility

• Always use labels with select elements
• Provide a clear default/placeholder option
• Use optgroup to organize long lists
• Ensure keyboard navigation works

Best Practices

• Put the most common options first
• Use clear, concise option labels
• Consider a searchable select for long lists (10+ options)
• Show the selected value clearly

API Reference

Classes

Class	Description
df-select	Base select class (required)
df-select--sm	Small size
df-select--lg	Large size
df-select--error	Error state