Skip to main content

Select

Styled native dropdown for choosing from a list.

Selectors

select
Auto-styled dropdown within .cider scope. Includes custom chevron icon.

Native Select

HTML 
<select>
  <option value="" disabled selected>Select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

With Groups

HTML 
<select>
  <option value="" disabled selected>Select a fruit</option>
  <optgroup label="Citrus">
    <option value="orange">Orange</option>
    <option value="lemon">Lemon</option>
    <option value="grapefruit">Grapefruit</option>
  </optgroup>
  <optgroup label="Berries">
    <option value="strawberry">Strawberry</option>
    <option value="blueberry">Blueberry</option>
    <option value="raspberry">Raspberry</option>
  </optgroup>
  <optgroup label="Tropical">
    <option value="mango">Mango</option>
    <option value="pineapple">Pineapple</option>
    <option value="papaya">Papaya</option>
  </optgroup>
</select>

With Label

This applies to your dashboard display language.
HTML 
<label for="lang-select">Language</label>
<select id="lang-select">
  <option value="" disabled selected>Select a language</option>
  <option value="en">English</option>
  <option value="es">Spanish</option>
  <option value="fr">French</option>
  <option value="ja">Japanese</option>
</select>
<small>This applies to your dashboard display language.</small>

Disabled

HTML 
<select disabled>
  <option value="" disabled selected>Select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Required

HTML 
<label for="role-req">Role</label>
<select id="role-req" required>
  <option value="" disabled selected>Select a role</option>
  <option value="admin">Admin</option>
  <option value="editor">Editor</option>
  <option value="viewer">Viewer</option>
</select>

Invalid State

Please select a role.
HTML 
<label for="role-err">Role</label>
<select id="role-err" aria-invalid="true" aria-describedby="role-err-msg">
  <option value="" disabled selected>Select a role</option>
  <option value="admin">Admin</option>
  <option value="editor">Editor</option>
  <option value="viewer">Viewer</option>
</select>
<small id="role-err-msg">Please select a role.</small>