Skip to content
MENU

Soracom

Design System

Select

Options 

There are two basic html structures for using ds-select. The most basic implementation is to apply ds-select directly to the html select element.

As of v1.13 ds-select can be applied to a wrapper div which provides better icon support and improved layout when combined with ds-text--addon.

Basic usage 

Select element
<select class="ds-select">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>
<select class="ds-select">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>
Div element
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>

Disabled 

Select element disabled state
<select class="ds-select" disabled>
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>
<select class="ds-select" disabled>
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>
Div element disabled state
<div class="ds-select">
  <select disabled>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select disabled>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>

Hide label 

Available from v1.5.54+

Adding ds-select--hide-label to a ds-select with an icon will hide the text value and shorten the button to display only the icon.

<div class="ds-select--hide-label ds-select--icon-basic-user">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select--hide-label ds-select--icon-basic-user">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>

Visual states 

Select adheres to the 4x preset visual states - alert, warning, success and info.

Select element with visual state
<div class="ds-select--alert">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select--warning">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select--success">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select--info">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select--alert">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select--warning">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select--success">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select--info">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
Select element with visual state
<select class="ds-select--alert">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>

<select class="ds-select--warning">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>

<select class="ds-select--success">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>

<select class="ds-select--info">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>
<select class="ds-select--alert">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>

<select class="ds-select--warning">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>

<select class="ds-select--success">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>

<select class="ds-select--info">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>

Icons 

To apply icons to ds-select, you must use the div based html structure.

<div class="ds-select--icon-basic-user">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select--icon-basic-user">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>

Size 

Available from v1.6.55+

Small, large 

Small size
<div class="ds-select--small">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<select class="ds-select--small">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>
<div class="ds-select--small">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<select class="ds-select--small">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>
Large size
<div class="ds-select--large">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<select class="ds-select--large">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>
<div class="ds-select--large">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<select class="ds-select--large">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>

Narrow, mid, wide 

By default ds-select takes the full width of it’s container element.

Narrow size
<div class="ds-select--narrow">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<select class="ds-select--narrow">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>
<div class="ds-select--narrow">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<select class="ds-select--narrow">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>
Mid size
<div class="ds-select--mid">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<select class="ds-select--mid">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>
<div class="ds-select--mid">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<select class="ds-select--mid">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>
Wide size
<div class="ds-select--wide">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<select class="ds-select--wide">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>
<div class="ds-select--wide">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<select class="ds-select--wide">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>

Styles 

Custom styles exist for specific use cases.

Button style 

Available from v1.5.54+

In situations where the select element is grouped adjacent to buttons in a button bar, it may be appropriate to style the select element as a button using ds-select--button-default. Currently only the default button style is supported.

<select class="ds-select--button-default">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>
<select class="ds-select--button-default">
  <option value="AU">Australia</option>
  <option value="JP">Japan</option>
  <option value="US">United States of America</option>
</select>

Examples 

<div class="ds-select--icon-settings ds-select--button-default ds-select--hide-label">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select--icon-settings ds-select--button-default ds-select--hide-label">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>

Language select menu 

<div class="ds-select ds-select--icon-language-solid">
  <select>
    <option>English</option>
    <option>日本語</option>
  </select>
</div>
<div class="ds-select ds-select--icon-language-solid">
  <select>
    <option>English</option>
    <option>日本語</option>
  </select>
</div>