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

html

Copy

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

Input element

html

Copy

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

Textarea element

html

Copy

<textarea name="test" rows="5" class="ds-input"></textarea>

Disabled

Div element disabled state

html

Copy

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

Input element disabled state

html

Copy

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

Textarea element disabled state

html

Copy

<textarea name="test" rows="5" class="ds-input" disabled></textarea>

Readonly

Div element readonly state

html

Copy

<div class="ds-input">
  <input type="text" name="test" value="Read only text" readonly />
</div>
<div class="ds-input --icon-edit">
  <input type="text" name="test" value="Read only text" readonly />
</div>

Input element readonly state

html

Copy

<input
  type="text"
  name="test"
  class="ds-input"
  value="Read only text"
  readonly
/>

Textarea element readonly state

html

Copy

<textarea name="test" rows="5" class="ds-input" readonly>
Read only text</textarea
>

Placeholder

Div element

html

Copy

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

Input element with placeholder text

html

Copy

<input
  type="text"
  name="test"
  class="ds-input"
  placeholder="Placeholder text"
/>

Textarea element with placeholder text

html

Copy

<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

html

Copy

<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

html

Copy

<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

html

Copy

<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

html

Copy

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

Textarea with icon

html

Copy

<div class="ds-input --icon-edit">
  <textarea name="test" rows="5"></textarea>
</div>

Size

Small, large

Small size

html

Copy

<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

html

Copy

<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

html

Copy

<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

html

Copy

<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

html

Copy

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

Button inside input

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

Text inside input

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

Input with text

html

Copy

<div class="ds-input">
  <input type="text" />
  <div class="ds-text">空色 Sky blue</div>
</div>
<div class="ds-input">
  <div class="ds-text">空色 Sky blue</div>
  <input type="text" />
</div>
<!-- Disabled -->
<div class="ds-input">
  <input type="text" disabled />
  <div class="ds-text">空色 Sky blue</div>
</div>
<div class="ds-input">
  <div class="ds-text">空色 Sky blue</div>
  <input type="text" disabled />
</div>
<!-- Read only -->
<div class="ds-input">
  <input type="text" readonly />
  <div class="ds-text">空色 Sky blue</div>
</div>
<div class="ds-input">
  <div class="ds-text">空色 Sky blue</div>
  <input type="text" readonly />
</div>

Input with addon text

html

Copy

<div class="ds-input">
  <input type="text" />
  <div class="ds-text --addon">空色 Sky blue</div>
</div>
<div class="ds-input">
  <div class="ds-text --addon">空色 Sky blue</div>
  <input type="text" />
</div>
<!-- Disabled -->
<div class="ds-input">
  <input type="text" disabled />
  <div class="ds-text --addon">空色 Sky blue</div>
</div>
<div class="ds-input">
  <div class="ds-text --addon">空色 Sky blue</div>
  <input type="text" disabled />
</div>
<!-- Read only -->
<div class="ds-input">
  <input type="text" readonly />
  <div class="ds-text --addon">空色 Sky blue</div>
</div>
<div class="ds-input">
  <div class="ds-text --addon">空色 Sky blue</div>
  <input type="text" readonly />
</div>

Input with addon light text

html

Copy

<div class="ds-input">
  <input type="text" />
  <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" />
</div>
<!-- Disabled -->
<div class="ds-input">
  <input type="text" disabled />
  <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" disabled />
</div>
<!-- Read only -->
<div class="ds-input">
  <input type="text" readonly />
  <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" readonly />
</div>

Input with addon dark text

html

Copy

<div class="ds-input">
  <input type="text" />
  <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" />
</div>
<!-- Disabled -->
<div class="ds-input">
  <input type="text" disabled />
  <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" disabled />
</div>
<!-- Read only -->
<div class="ds-input">
  <input type="text" readonly />
  <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" readonly />
</div>

Input types

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

html

Copy

<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

html

Copy

<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]2T[0-9]2:[0-9]2“
`placeholder`	Optional	Only used by browsers that don’t support datetime-local	”yy-mm-ddThh:mm”

html

Copy

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

html

Copy

<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 --icon-cancel --hide-label ">
    <span>Clear</span>
  </button>
  <button class="ds-button --addon --icon-confirm --hide-label ">
    <span>Clear</span>
  </button>
</div>

File upload

See Field with file upload for additional examples.

Basic file upload input

html

Copy

<div class="ds-input">
  <input type="file" />
</div>

Styles

Code style

Use mono-space Source Sans Code font

html

Copy

<div class="ds-input --code">
  <input type="text" name="test" value="空色 Sky blue 1234567890" />
</div>

Examples

datetime-split combined with sizing options

html

Copy

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

html

Copy

<!-- 1. Default -->
<div class="ds-input --datetime-split">
  <input type="date" name="test" />
  <input type="time" name="test" />
  <button class="ds-button --addon --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 --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 --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 --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 --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 --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 --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 --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 --icon-cancel --hide-label ">
    <span>Clear</span>
  </button>
</div>

datetime-split with ds-autoselect combined with sizing options

html

Copy

<!-- 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="__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="__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="__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="__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="__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="__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="__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="__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="__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

html

Copy

<!-- 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="__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="__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="__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="__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="__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="__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="__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="__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="__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>