Skip to content
MENU

Soracom

Design System

Input

This component was previously named ds-text-input.

Options 

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

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

ds-input may be used with html input or html textarea (available from v1.8.12+) elements.

Basic usage 

Div element
<div class="ds-input">
  <input type="text" name="test"/>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-input">
  <input type="text" name="test"/>
</div>
Input element
<input type="text" name="test" class="ds-input"/>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<input type="text" name="test" class="ds-input"/>
Textarea element
<textarea name="test" rows="5" class="ds-input"></textarea>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<textarea name="test" rows="5" class="ds-input"></textarea>

Disabled 

Div element disabled state
<div class="ds-input">
  <input type="text" name="test" disabled/>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-input">
  <input type="text" name="test" disabled/>
</div>
Input element disabled state
<input type="text" name="test" class="ds-input" disabled/>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<input type="text" name="test" class="ds-input" disabled/>
Textarea element disabled state
<textarea name="test" rows="5" class="ds-input" disabled></textarea>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<textarea name="test" rows="5" class="ds-input" disabled></textarea>

Placeholder 

Div element
<div class="ds-input">
  <input type="text" name="test" placeholder="Placeholder text"/>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-input">
  <input type="text" name="test" placeholder="Placeholder text"/>
</div>
Input element with placeholder text
<input type="text" name="test" class="ds-input" placeholder="Placeholder text"/>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<input type="text" name="test" class="ds-input" placeholder="Placeholder text"/>
Textarea element with placeholder text
<textarea name="test" rows="5" class="ds-input" placeholder="Placeholder text"></textarea>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<textarea name="test" rows="5" class="ds-input" placeholder="Placeholder text"></textarea>

Visual states 

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

Div element with visual state
<div  class="ds-input --alert">
  <input type="text" name="test"/>
</div>
<div  class="ds-input --warning">
  <input type="text" name="test"/>
</div>
<div  class="ds-input --success">
  <input type="text" name="test"/>
</div>
<div  class="ds-input --info">
  <input type="text" name="test"/>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div  class="ds-input --alert">
  <input type="text" name="test"/>
</div>
<div  class="ds-input --warning">
  <input type="text" name="test"/>
</div>
<div  class="ds-input --success">
  <input type="text" name="test"/>
</div>
<div  class="ds-input --info">
  <input type="text" name="test"/>
</div>
Input element with visual state
<input type="text" name="test" class="ds-input --alert" />
<input type="text" name="test" class="ds-input --warning" />
<input type="text" name="test" class="ds-input --success" />
<input type="text" name="test" class="ds-input --info" />
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<input type="text" name="test" class="ds-input --alert" />
<input type="text" name="test" class="ds-input --warning" />
<input type="text" name="test" class="ds-input --success" />
<input type="text" name="test" class="ds-input --info" />
Textarea element with visual state
<textarea name="test" rows="5" class="ds-input --alert"></textarea>
<textarea name="test" rows="5" class="ds-input --warning"></textarea>
<textarea name="test" rows="5" class="ds-input --success"></textarea>
<textarea name="test" rows="5" class="ds-input --info"></textarea>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<textarea name="test" rows="5" class="ds-input --alert"></textarea>
<textarea name="test" rows="5" class="ds-input --warning"></textarea>
<textarea name="test" rows="5" class="ds-input --success"></textarea>
<textarea name="test" rows="5" class="ds-input --info"></textarea>

Icons 

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

Input with icon
<div class="ds-input --icon-edit">
  <input type="text" name="test"/>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-input --icon-edit">
  <input type="text" name="test"/>
</div>
Textarea with icon
<div class="ds-input --icon-edit">
  <textarea name="test" rows="5"></textarea>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-input --icon-edit">
  <textarea name="test" rows="5"></textarea>
</div>

Size 

Small, large 

Small size
<input type="text" name="test" class="ds-input --small"/>

<div class="ds-input --small">
  <input type="text" name="test"/>
</div>

<div class="ds-input --small --icon-edit">
  <input type="text" name="test"/>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<input type="text" name="test" class="ds-input --small"/>

<div class="ds-input --small">
  <input type="text" name="test"/>
</div>

<div class="ds-input --small --icon-edit">
  <input type="text" name="test"/>
</div>
Large size
<input type="text" name="test" class="ds-input --large"/>

<div class="ds-input --large">
  <input type="text" name="test"/>
</div>

<div class="ds-input --large --icon-edit">
  <input type="text" name="test"/>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<input type="text" name="test" class="ds-input --large"/>

<div class="ds-input --large">
  <input type="text" name="test"/>
</div>

<div class="ds-input --large --icon-edit">
  <input type="text" name="test"/>
</div>

Narrow, mid, wide 

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

Narrow size
<input type="text" name="test" class="ds-input --narrow"/>

<div class="ds-input --narrow">
  <input type="text" name="test"/>
</div>

<div class="ds-input --narrow --icon-edit">
  <input type="text" name="test"/>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<input type="text" name="test" class="ds-input --narrow"/>

<div class="ds-input --narrow">
  <input type="text" name="test"/>
</div>

<div class="ds-input --narrow --icon-edit">
  <input type="text" name="test"/>
</div>
Mid size
<input type="text" name="test" class="ds-input --mid"/>

<div class="ds-input --mid">
  <input type="text" name="test"/>
</div>

<div class="ds-input --mid --icon-edit">
  <input type="text" name="test"/>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<input type="text" name="test" class="ds-input --mid"/>

<div class="ds-input --mid">
  <input type="text" name="test"/>
</div>

<div class="ds-input --mid --icon-edit">
  <input type="text" name="test"/>
</div>
Wide size
<input type="text" name="test" class="ds-input --wide"/>

<div class="ds-input --wide">
  <input type="text" name="test"/>
</div>

<div class="ds-input --wide --icon-edit">
  <input type="text" name="test"/>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<input type="text" name="test" class="ds-input --wide"/>

<div class="ds-input --wide">
  <input type="text" name="test"/>
</div>

<div class="ds-input --wide --icon-edit">
  <input type="text" name="test"/>
</div>

Date picker 

The native date picker works across all target browsers and the UI is specific to each to browser.

The displayed date is formatted based on the locale of the user’s browser, but the parsed value is always formatted yyyy-mm-dd

Optional attributes

Attribute Required Description Value
max Optional The latest allowable date yyyy-mm-dd
min Optional The earliest allowable date yyyy-mm-dd
step Optional The step increment when adjusting the date "any" or number
<div class="ds-input --date">
  <input type="date" name="test"/>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-input --date">
  <input type="date" name="test"/>
</div>

Time picker 

The native time picker works across all target browsers and the UI is specific to each to browser.

The displayed time is formatted based on the locale of the user’s browser, but the parsed value is always in 24-hour format that includes leading zeros: hh:mm or hh:mm:ss.

The time picker is only for specific time values (00:00 - 24:00). Longer times (for specifying time length such as 48 hours) will not work with the native type="time" component.

Optional attributes

Attribute Required Description Value
max Optional The latest allowable time hh:mm or hh:mm:ss
min Optional The earliest allowable time hh:mm or hh:mm:ss
step Optional The step increment when adjusting the time "any" or number
<div class="ds-input --time">
  <input type="time" name="test"/>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-input --time">
  <input type="time" name="test"/>
</div>

Datetime picker 

The native datetime picker works across all target browsers except Firefox and the UI is specific to each to browser.

See also the split datetime picker - which is also works in Firefox.

The displayed date is formatted based on the locale of the user’s browser, but the parsed value is always formatted yyyy-mm-ddThh:mm

Optional attributes

Attribute Required Description Value
max Optional The latest allowable date yyyy-mm-ddThh:mm
min Optional The earliest allowable date yyyy-mm-ddThh:mm
step Optional The step increment when adjusting the date "any" or number
pattern Optional Only used by browsers that don't support datetime-local "[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
placeholder Optional Only used by browsers that don't support datetime-local "yy-mm-ddThh:mm"
<div class="ds-input --datetime">
  <input type="datetime-local" name="test" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" placeholder="yyyy-mm-ddThh:mm"/>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-input --datetime">
  <input type="datetime-local" name="test" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" placeholder="yyyy-mm-ddThh:mm"/>
</div>

Split datetime 

Split datetime uses two input fields - type="date", type="time" (See the requirements/options for each above) and optional ds-button.

This version has the advantage of working across all target browsers (including Firefox).

<div class="ds-input --datetime-split">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- With button -->
<div class="ds-input --datetime-split">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- With multiple buttons -->
<div class="ds-input --datetime-split">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button><button class="ds-button --addon-light --icon-confirm --hide-label "><span>Clear</span></button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-input --datetime-split">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- With button -->
<div class="ds-input --datetime-split">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- With multiple buttons -->
<div class="ds-input --datetime-split">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button><button class="ds-button --addon-light --icon-confirm --hide-label "><span>Clear</span></button>
</div>

Examples 

datetime-split combined with sizing options 

<!-- 1. Default -->
<div class="ds-input --datetime-split">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- 2. --mid -->
<div class="ds-input --datetime-split --mid">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- 3. --narrow -->
<div class="ds-input --datetime-split --narrow">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- 4. --small -->
<div class="ds-input --datetime-split --small">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- 5. --small --mid -->
<div class="ds-input --datetime-split --small --mid">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- 6. --small --narrow -->
<div class="ds-input --datetime-split --small --narrow">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- 7. --large -->
<div class="ds-input --datetime-split --large">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- 8. --large --mid -->
<div class="ds-input --datetime-split --large --mid">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- 9. --large --narrow -->
<div class="ds-input --datetime-split --large --narrow">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- 1. Default -->
<div class="ds-input --datetime-split">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- 2. --mid -->
<div class="ds-input --datetime-split --mid">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- 3. --narrow -->
<div class="ds-input --datetime-split --narrow">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- 4. --small -->
<div class="ds-input --datetime-split --small">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- 5. --small --mid -->
<div class="ds-input --datetime-split --small --mid">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- 6. --small --narrow -->
<div class="ds-input --datetime-split --small --narrow">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- 7. --large -->
<div class="ds-input --datetime-split --large">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- 8. --large --mid -->
<div class="ds-input --datetime-split --large --mid">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>
<!-- 9. --large --narrow -->
<div class="ds-input --datetime-split --large --narrow">
  <input type="date" name="test"/><input type="time" name="test"/>
</div>

datetime-split with buttons combined with sizing options 

<!-- 1. Default -->
<div class="ds-input --datetime-split">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 2. --mid -->
<div class="ds-input --datetime-split --mid">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 3. --narrow -->
<div class="ds-input --datetime-split --narrow">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 4. --small -->
<div class="ds-input --datetime-split --small">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 5. --small --mid -->
<div class="ds-input --datetime-split --small --mid">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 6. --small --narrow -->
<div class="ds-input --datetime-split --small --narrow">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 7. --large -->
<div class="ds-input --datetime-split --large">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 8. --large --mid -->
<div class="ds-input --datetime-split --large --mid">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 9. --large --narrow -->
<div class="ds-input --datetime-split --large --narrow">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- 1. Default -->
<div class="ds-input --datetime-split">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 2. --mid -->
<div class="ds-input --datetime-split --mid">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 3. --narrow -->
<div class="ds-input --datetime-split --narrow">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 4. --small -->
<div class="ds-input --datetime-split --small">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 5. --small --mid -->
<div class="ds-input --datetime-split --small --mid">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 6. --small --narrow -->
<div class="ds-input --datetime-split --small --narrow">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 7. --large -->
<div class="ds-input --datetime-split --large">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 8. --large --mid -->
<div class="ds-input --datetime-split --large --mid">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 9. --large --narrow -->
<div class="ds-input --datetime-split --large --narrow">
  <input type="date" name="test"/><input type="time" name="test"/><button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>

datetime-split with ds-autoselect combined with sizing options 

<!-- 1. Default -->
<div class="ds-input --datetime-split">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
<!-- 2. --mid -->
<div class="ds-input --datetime-split --mid">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
<!-- 3. --narrow -->
<div class="ds-input --datetime-split --narrow">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
<!-- 4. --small -->
<div class="ds-input --datetime-split --small">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
<!-- 5. --small --mid -->
<div class="ds-input --datetime-split --small --mid">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
<!-- 6. --small --narrow -->
<div class="ds-input --datetime-split --small --narrow">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
<!-- 7. --large -->
<div class="ds-input --datetime-split --large">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
<!-- 8. --large --mid -->
<div class="ds-input --datetime-split --large --mid">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
<!-- 9. --large --narrow -->
<div class="ds-input --datetime-split --large --narrow">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- 1. Default -->
<div class="ds-input --datetime-split">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
<!-- 2. --mid -->
<div class="ds-input --datetime-split --mid">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
<!-- 3. --narrow -->
<div class="ds-input --datetime-split --narrow">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
<!-- 4. --small -->
<div class="ds-input --datetime-split --small">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
<!-- 5. --small --mid -->
<div class="ds-input --datetime-split --small --mid">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
<!-- 6. --small --narrow -->
<div class="ds-input --datetime-split --small --narrow">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
<!-- 7. --large -->
<div class="ds-input --datetime-split --large">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
<!-- 8. --large --mid -->
<div class="ds-input --datetime-split --large --mid">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>
<!-- 9. --large --narrow -->
<div class="ds-input --datetime-split --large --narrow">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
</div>

datetime-split with buttons and ds-autoselect combined with sizing options 

<!-- 1. Default -->
<div class="ds-input --datetime-split">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 2. --mid -->
<div class="ds-input --datetime-split --mid">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 3. --narrow -->
<div class="ds-input --datetime-split --narrow">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 4. --small -->
<div class="ds-input --datetime-split --small">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 5. --small --mid -->
<div class="ds-input --datetime-split --small --mid">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 6. --small --narrow -->
<div class="ds-input --datetime-split --small --narrow">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 7. --large -->
<div class="ds-input --datetime-split --large">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 8. --large --mid -->
<div class="ds-input --datetime-split --large --mid">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 9. --large --narrow -->
<div class="ds-input --datetime-split --large --narrow">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- 1. Default -->
<div class="ds-input --datetime-split">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 2. --mid -->
<div class="ds-input --datetime-split --mid">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 3. --narrow -->
<div class="ds-input --datetime-split --narrow">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 4. --small -->
<div class="ds-input --datetime-split --small">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 5. --small --mid -->
<div class="ds-input --datetime-split --small --mid">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 6. --small --narrow -->
<div class="ds-input --datetime-split --small --narrow">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 7. --large -->
<div class="ds-input --datetime-split --large">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 8. --large --mid -->
<div class="ds-input --datetime-split --large --mid">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>
<!-- 9. --large --narrow -->
<div class="ds-input --datetime-split --large --narrow">
  <input type="date" name="test"/>
  <div class="ds-autocomplete">
    <input type="text" name="test-field" class="ds-input">
    <ul class="ds-autocomplete__list">
      <li>Last 10 minutes</li>
      <li>Last 30 minutes</li>
      <li>Last hour</li>
      <li>Last 2 hours</li>
      <li>Last 3 hours</li>
      <li>Last 6 hours</li>
      <li>Last 12 hours</li>
      <li>Last day</li>
    </ul>
  </div>
  <button class="ds-button --addon-light --icon-cancel --hide-label "><span>Clear</span></button>
</div>