Skip to content

Soracom

Design System
Home Design System Elements Select

Select

stable dark-mode icon-support component-colors short-class-names

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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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-user">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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  

<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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 
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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-user">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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 
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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.

<!-- 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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- 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.

<!-- 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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- 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.

<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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 --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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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  

<div class="ds-select --icon-language-solid">
  <select>
    <option>English</option>
    <option>日本語</option>
  </select>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<div class="ds-select --icon-language-solid">
  <select>
    <option>English</option>
    <option>日本語</option>
  </select>
</div>
Copyright © 2015-2024 Soracom, Inc.
Last page update: February 15, 2023
1a058e9a