Soracom

Design System
  1. Home
  2. Design system
  3. Elements
  4. Select

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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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.

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

Component colors

html
Copy 
<div class="ds-select --color-celeste">
  <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

html
Copy 
<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

html
Copy 
<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.

html
Copy 
<div class="ds-select --icon-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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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

html
Copy 
<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>

Button addon inside select

ds-button can be used inside ds-select. See ds-button for further examples.

html
Copy 
<!-- ds-select + button -->
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <button class="ds-button">
    <span>Button label</span>
  </button>
</div>

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

<!-- ds-select + button default addon -->
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
</div>

<div class="ds-select">
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>

<!-- ds-select + button primary addon -->
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <button class="ds-button --addon --primary">
    <span>Button label</span>
  </button>
</div>

<div class="ds-select">
  <button class="ds-button --addon --primary">
    <span>Button label</span>
  </button>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>

<!-- ds-select + button plain addon -->
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <button class="ds-button --addon --plain">
    <span>Button label</span>
  </button>
</div>

<div class="ds-select">
  <button class="ds-button --addon --plain">
    <span>Button label</span>
  </button>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>

Text addon inside select

ds-text can be used inside ds-select. See ds-text for further examples.

html
Copy 
<!-- ds-select with text -->
<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 class="ds-text">空色 Sky blue</div>
</div>

<div class="ds-select">
  <div class="ds-text">空色 Sky blue</div>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>

<!-- ds-select + text addon -->
<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 class="ds-text --addon">空色 Sky blue</div>
</div>

<div class="ds-select">
  <div class="ds-text --addon">空色 Sky blue</div>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>

<!-- ds-select + text addon-light -->
<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 class="ds-text --addon-light">空色 Sky blue</div>
</div>

<div class="ds-select">
  <div class="ds-text --addon-light">空色 Sky blue</div>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>

<!-- ds-select + text addon-dark -->
<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 class="ds-text --addon-dark">空色 Sky blue</div>
</div>

<div class="ds-select">
  <div class="ds-text --addon-dark">空色 Sky blue</div>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>

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.

html
Copy 
<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

html
Copy 
<div class="ds-select --icon-settings --button-default --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

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