Skip to content

Soracom

Design System
Home Design System Elements 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
<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-text for further examples.

Text addon inside select 

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

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>

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

Select with addon text 

<!-- 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 + 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>

Select with button 

<!-- 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 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 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>
  <button class="ds-button --addon-light">
    <span>Button label</span>
  </button>
</div>

<div class="ds-select">
  <button class="ds-button --addon-light">
    <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 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>
  <button class="ds-button --addon-dark">
    <span>Button label</span>
  </button>
</div>

<div class="ds-select">
  <button class="ds-button --addon-dark">
    <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 addon primary -->
<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 addon primary red -->
<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 --color-red">
    <span>Button label</span>
  </button>
</div>

<div class="ds-select">
  <button class="ds-button --addon --primary --color-red">
    <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 addon default-->
<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 addon default red-->
<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 --color-red">
    <span>Button label</span>
  </button>
</div>

<div class="ds-select">
  <button class="ds-button --addon --color-red">
    <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 addon plain-->
<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>

<!-- ds-select + button addon plain red -->
<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 --color-red">
    <span>Button label</span>
  </button>
</div>

<div class="ds-select">
  <button class="ds-button --addon --plain --color-red">
    <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 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 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>
  <button class="ds-button --addon-light">
    <span>Button label</span>
  </button>
</div>

<div class="ds-select">
  <button class="ds-button --addon-light">
    <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 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>
  <button class="ds-button --addon-dark">
    <span>Button label</span>
  </button>
</div>

<div class="ds-select">
  <button class="ds-button --addon-dark">
    <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 addon primary -->
<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 addon primary red -->
<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 --color-red">
    <span>Button label</span>
  </button>
</div>

<div class="ds-select">
  <button class="ds-button --addon --primary --color-red">
    <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 addon default-->
<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 addon default red-->
<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 --color-red">
    <span>Button label</span>
  </button>
</div>

<div class="ds-select">
  <button class="ds-button --addon --color-red">
    <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 addon plain-->
<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>

<!-- ds-select + button addon plain red -->
<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 --color-red">
    <span>Button label</span>
  </button>
</div>

<div class="ds-select">
  <button class="ds-button --addon --plain --color-red">
    <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-input + text -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <div class="ds-text">空色 Sky blue</div>
</div>

<div class="ds-input">
  <div class="ds-text">空色 Sky blue</div>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + text addon -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <div class="ds-text --addon">空色 Sky blue</div>
</div>

<div class="ds-input">
  <div class="ds-text --addon">空色 Sky blue</div>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + text addon-light -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <div class="ds-text --addon-light">空色 Sky blue</div>
</div>

<div class="ds-input">
  <div class="ds-text --addon-light">空色 Sky blue</div>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + text addon-dark -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <div class="ds-text --addon-dark">空色 Sky blue</div>
</div>

<div class="ds-input">
  <div class="ds-text --addon-dark">空色 Sky blue</div>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon-light -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon-light">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon-light">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon-dark -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon-dark">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon-dark">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon primary -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon --primary">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon --primary">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon primary red -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon --primary --color-red">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon --primary --color-red">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon default-->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon default red-->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon --color-red">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon --color-red">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon plain-->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon --plain">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon --plain">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon plain red -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon --plain --color-red">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon --plain --color-red">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- ds-input + text -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <div class="ds-text">空色 Sky blue</div>
</div>

<div class="ds-input">
  <div class="ds-text">空色 Sky blue</div>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + text addon -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <div class="ds-text --addon">空色 Sky blue</div>
</div>

<div class="ds-input">
  <div class="ds-text --addon">空色 Sky blue</div>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + text addon-light -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <div class="ds-text --addon-light">空色 Sky blue</div>
</div>

<div class="ds-input">
  <div class="ds-text --addon-light">空色 Sky blue</div>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + text addon-dark -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <div class="ds-text --addon-dark">空色 Sky blue</div>
</div>

<div class="ds-input">
  <div class="ds-text --addon-dark">空色 Sky blue</div>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon-light -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon-light">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon-light">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon-dark -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon-dark">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon-dark">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon primary -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon --primary">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon --primary">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon primary red -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon --primary --color-red">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon --primary --color-red">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon default-->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon default red-->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon --color-red">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon --color-red">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon plain-->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon --plain">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon --plain">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>

<!-- ds-input + button addon plain red -->
<div class="ds-input">
  <input type="text" value="ABC123 XYZ890">
  <button class="ds-button --addon --plain --color-red">
    <span>Button label</span>
  </button>
</div>

<div class="ds-input">
  <button class="ds-button --addon --plain --color-red">
    <span>Button label</span>
  </button>
  <input type="text" value="ABC123 XYZ890">
</div>