Skip to content
MENU

Soracom

Design System

Text input

Options 

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

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

Basic usage 

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

Div element
<div class="ds-text-input">
  <input type="text" name="test"/>
</div>
<div class="ds-text-input">
  <input type="text" name="test"/>
</div>
Input element
<input type="text" name="test" class="ds-text-input"/>
<input type="text" name="test" class="ds-text-input"/>
Textarea element
<textarea name="test" rows="5" class="ds-text-input"></textarea>
<textarea name="test" rows="5" class="ds-text-input"></textarea>

Disabled 

Div element disabled state
<div class="ds-text-input">
  <input type="text" name="test" disabled/>
</div>
<div class="ds-text-input">
  <input type="text" name="test" disabled/>
</div>
Input element disabled state
<input type="text" name="test" class="ds-text-input" disabled/>
<input type="text" name="test" class="ds-text-input" disabled/>
Textarea element disabled state
<textarea name="test" rows="5" class="ds-text-input" disabled></textarea>
<textarea name="test" rows="5" class="ds-text-input" disabled></textarea>

Placeholder 

Div element
<div class="ds-text-input">
  <input type="text" name="test" placeholder="Placeholder text"/>
</div>
<div class="ds-text-input">
  <input type="text" name="test" placeholder="Placeholder text"/>
</div>
Input element with placeholder text
<input type="text" name="test" class="ds-text-input" placeholder="Placeholder text"/>
<input type="text" name="test" class="ds-text-input" placeholder="Placeholder text"/>
Textarea element with placeholder text
<textarea name="test" rows="5" class="ds-text-input" placeholder="Placeholder text"></textarea>
<textarea name="test" rows="5" class="ds-text-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-text-input--alert">
  <input type="text" name="test"/>
</div>
<div  class="ds-text-input--warning">
  <input type="text" name="test"/>
</div>
<div  class="ds-text-input--success">
  <input type="text" name="test"/>
</div>
<div  class="ds-text-input--info">
  <input type="text" name="test"/>
</div>
<div  class="ds-text-input--alert">
  <input type="text" name="test"/>
</div>
<div  class="ds-text-input--warning">
  <input type="text" name="test"/>
</div>
<div  class="ds-text-input--success">
  <input type="text" name="test"/>
</div>
<div  class="ds-text-input--info">
  <input type="text" name="test"/>
</div>
Input element with visual state
<input type="text" name="test" class="ds-text-input--alert" />
<input type="text" name="test" class="ds-text-input--warning" />
<input type="text" name="test" class="ds-text-input--success" />
<input type="text" name="test" class="ds-text-input--info" />
<input type="text" name="test" class="ds-text-input--alert" />
<input type="text" name="test" class="ds-text-input--warning" />
<input type="text" name="test" class="ds-text-input--success" />
<input type="text" name="test" class="ds-text-input--info" />
Textarea element with visual state
<textarea name="test" rows="5" class="ds-text-input--alert"></textarea>
<textarea name="test" rows="5" class="ds-text-input--warning"></textarea>
<textarea name="test" rows="5" class="ds-text-input--success"></textarea>
<textarea name="test" rows="5" class="ds-text-input--info"></textarea>
<textarea name="test" rows="5" class="ds-text-input--alert"></textarea>
<textarea name="test" rows="5" class="ds-text-input--warning"></textarea>
<textarea name="test" rows="5" class="ds-text-input--success"></textarea>
<textarea name="test" rows="5" class="ds-text-input--info"></textarea>

Icons 

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

Input with icon
<div class="ds-text-input--icon-time">
  <input type="text" name="test"/>
</div>
<div class="ds-text-input--icon-time">
  <input type="text" name="test"/>
</div>
Textarea with icon
<div class="ds-text-input--icon-time">
  <textarea name="test" rows="5"></textarea>
</div>
<div class="ds-text-input--icon-time">
  <textarea name="test" rows="5"></textarea>
</div>

Size 

Small, large 

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

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

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

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

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

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

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

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

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

Narrow, mid, wide 

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="ds-text-input--wide ds-text-input--icon-time">
  <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 element
<div class="ds-text-input--date">
  <input type="date" name="test"/>
</div>
<div class="ds-text-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

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 element
<div class="ds-text-input--time">
  <input type="time" name="test"/>
</div>
<div class="ds-text-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.

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 element
<div class="ds-text-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>
<div class="ds-text-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>