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
Disabled
<div class="ds-input">
<input type="text" name="test" disabled/>
</div>
<div class="ds-input --icon-edit">
<input type="text" name="test" disabled/>
</div><textarea name="test" rows="5" class="ds-input" disabled></textarea>Readonly
<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 type="text" name="test" class="ds-input" value="Read only text" readonly/><textarea name="test" rows="5" class="ds-input" readonly>Read only text</textarea>Placeholder
<div class="ds-input">
<input type="text" name="test" placeholder="Placeholder text"/>
</div><input type="text" name="test" class="ds-input" placeholder="Placeholder text"/><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 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 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 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.
<div class="ds-input --icon-edit">
<textarea name="test" rows="5"></textarea>
</div>Size
Small, large
<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><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.
<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><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><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
<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
<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
<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
<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 |
<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>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>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 --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.
Styles
Code style
<div class="ds-input --code">
<input type="text" name="test" value="空色 Sky blue 1234567890"/>
</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>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 --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
<!-- 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-menu">
<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-menu">
<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-menu">
<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-menu">
<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-menu">
<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-menu">
<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-menu">
<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-menu">
<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-menu">
<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-menu">
<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-menu">
<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-menu">
<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-menu">
<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-menu">
<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-menu">
<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-menu">
<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-menu">
<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-menu">
<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>