Skip to content
MENU

Soracom

Design System

Field

A field is a generic container that contains a label, input and text.

Overview 

The field compontent is a container for an input (checkbox, text field, select etc) and optionally a label and text.

Options 

Basic usage 

Example using simple ds-input
<div class="ds-field">
  <label for="sample-1" class="ds-label">Label content</label>
  <input id="sample-1" class="ds-input" type="text" />
  <div class="ds-text">Text content</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <label for="sample-1" class="ds-label">Label content</label>
  <input id="sample-1" class="ds-input" type="text" />
  <div class="ds-text">Text content</div>
</div>
Example using div based ds-input
<div class="ds-field">
  <label for="sample-2" class="ds-label">Label content</label>
  <div class="ds-input">
    <input id="sample-2" type="text" />
  </div>
  <div class="ds-text">Text content</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <label for="sample-2" class="ds-label">Label content</label>
  <div class="ds-input">
    <input id="sample-2" type="text" />
  </div>
  <div class="ds-text">Text content</div>
</div>
Example using simple ds-select
<div class="ds-field">
  <label for="sample-3" class="ds-label">Label content</label>
  <select id="sample-3" class="ds-select">
    <option>Option text</option>
  </select>
  <div class="ds-text">Text content</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <label for="sample-3" class="ds-label">Label content</label>
  <select id="sample-3" class="ds-select">
    <option>Option text</option>
  </select>
  <div class="ds-text">Text content</div>
</div>

Grouping contents 

When using text –addons or –tips, or generally more complex combinations, you should group those items using their <div> based structure.

Example using div based ds-input
<div class="ds-field">
  <label for="sample-4" class="ds-label">Label content</label>
  <div class="ds-input">
    <input id="sample-4" type="text" />
    <div class="ds-text--addon">Text</div>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <label for="sample-4" class="ds-label">Label content</label>
  <div class="ds-input">
    <input id="sample-4" type="text" />
    <div class="ds-text--addon">Text</div>
  </div>
</div>
Example using div based ds-select
<div class="ds-field">
  <label for="sample-4" class="ds-label">Label content</label>
  <div class="ds-select">
    <select id="sample-4">
      <option>Option text</option>
    </select>
    <div class="ds-text--addon">Text</div>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <label for="sample-4" class="ds-label">Label content</label>
  <div class="ds-select">
    <select id="sample-4">
      <option>Option text</option>
    </select>
    <div class="ds-text--addon">Text</div>
  </div>
</div>

Notification indicator 

A field can display a notification indicator (dot) by adding the class ds-field--notification.

You can also apply the notification indicator directly to the Label.

<div class="ds-field--notification">
  <label for="sample-5" class="ds-label">Label content</label>
  <div class="ds-input">
    <input id="sample-5" type="text" />
  </div>
  <div class="ds-text">Text content</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field--notification">
  <label for="sample-5" class="ds-label">Label content</label>
  <div class="ds-input">
    <input id="sample-5" type="text" />
  </div>
  <div class="ds-text">Text content</div>
</div>

Notification indicators adhere to 4x preset visual states - alert, warning, success and info.

<div class="ds-field--notification-success">
  <label for="sample-6" class="ds-label">Label content</label>
  <div class="ds-input">
    <input id="sample-6" type="text" />
  </div>
  <div class="ds-text">Text content</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field--notification-success">
  <label for="sample-6" class="ds-label">Label content</label>
  <div class="ds-input">
    <input id="sample-6" type="text" />
  </div>
  <div class="ds-text">Text content</div>
</div>

Additionally, if the field has an attribute data-notification-counter set to a non-empty value, that value will be shown in the indicator. If the attribute is set to empty data-notification-counter="" the indicator dot will be hidden.

Notification indicators counter support with html <fieldset> element
<div class="ds-field--notification" data-notification-counter="3">
  <label for="sample-7" class="ds-label">Label content</label>
  <div class="ds-input">
    <input id="sample-7" type="text" />
  </div>
  <div class="ds-text">Text content</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field--notification" data-notification-counter="3">
  <label for="sample-7" class="ds-label">Label content</label>
  <div class="ds-input">
    <input id="sample-7" type="text" />
  </div>
  <div class="ds-text">Text content</div>
</div>

Examples 

Label, text input with icon and text 

Field container with Label and Text input with icon, and Text.

<div class="ds-field">
  <label for="example-1" class="ds-label">Field test</label>
  <div class="ds-input --icon-time">
    <input type="text" id="example-1" placeholder="Placeholder text">
  </div>
  <div class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <label for="example-1" class="ds-label">Field test</label>
  <div class="ds-input --icon-time">
    <input type="text" id="example-1" placeholder="Placeholder text">
  </div>
  <div class="ds-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.</div>
</div>

Label, text input with icon and text addon 

Field container with Label and Text input with icon, and Text (addon style).

<div class="ds-field">
  <label for="example-2" class="ds-label">Field test</label>
  <div class="ds-input --icon-time">
    <input type="text" id="example-2" placeholder="Placeholder text">
    <div class="ds-text--addon">MiB</div>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <label for="example-2" class="ds-label">Field test</label>
  <div class="ds-input --icon-time">
    <input type="text" id="example-2" placeholder="Placeholder text">
    <div class="ds-text--addon">MiB</div>
  </div>
</div>

Label, select input with icon and text tip 

Field container with Label and Select with icon, and Text (tip style).

<div class="ds-field">
  <label for="example-3" class="ds-label">Field test</label>
  <div class="ds-select--icon-time">
    <select id="sample-3">
      <option>Option text</option>
    </select>
  </div>
  <div class="ds-text--tip ds-text--small">Longer text description that will wrap</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <label for="example-3" class="ds-label">Field test</label>
  <div class="ds-select--icon-time">
    <select id="sample-3">
      <option>Option text</option>
    </select>
  </div>
  <div class="ds-text--tip ds-text--small">Longer text description that will wrap</div>
</div>

Multiple inputs, icon and text addons 

Field container with Label and a small and medium size Text input with icon, and Text (addon style).

<div class="ds-field">
  <label for="example-4" class="ds-label">Field test</label>
  <div class="ds-input --icon-time">
    <input type="text" id="example-4" placeholder="123">
    <div class="ds-text--addon">MiB</div>
  </div>
  <i class="ds-icon --icon-arrow-right"></i>
  <div class="ds-input --icon-basic-user">
    <input type="text" id="example-5" placeholder="ABC">
    <div class="ds-text--addon">MiB</div>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <label for="example-4" class="ds-label">Field test</label>
  <div class="ds-input --icon-time">
    <input type="text" id="example-4" placeholder="123">
    <div class="ds-text--addon">MiB</div>
  </div>
  <i class="ds-icon --icon-arrow-right"></i>
  <div class="ds-input --icon-basic-user">
    <input type="text" id="example-5" placeholder="ABC">
    <div class="ds-text--addon">MiB</div>
  </div>
</div>

Multiple fields inside a ds-cols 

Inside ds-cols, you can add ds-span--X (1-12) to the ds-field element to adjust the size of the columns.

If a ds-field does not contain a ds-label element - extra spacing at the top of the ds-field can be enabled by using ds-field--top-spacer.

<div class="ds-cols --small">
  <div class="ds-field">
    <label for="example-6" class="ds-label ">Field test</label>
    <div class="ds-input --icon-time">
      <input type="text" id="example-6" placeholder="123">
      <div class="ds-text--addon">MiB</div>
    </div>
  </div>
  <i class="ds-icon --icon-arrow-right"></i>
  <div class="ds-field--bottom">
    <div class="ds-input --icon-basic-user">
      <input type="text" id="example-7" placeholder="ABC">
      <div class="ds-text--addon">MiB</div>
    </div>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-cols --small">
  <div class="ds-field">
    <label for="example-6" class="ds-label ">Field test</label>
    <div class="ds-input --icon-time">
      <input type="text" id="example-6" placeholder="123">
      <div class="ds-text--addon">MiB</div>
    </div>
  </div>
  <i class="ds-icon --icon-arrow-right"></i>
  <div class="ds-field--bottom">
    <div class="ds-input --icon-basic-user">
      <input type="text" id="example-7" placeholder="ABC">
      <div class="ds-text--addon">MiB</div>
    </div>
  </div>
</div>

Show/Hide password 

The following structure is suitable for implementing a show/hide password control.

The example toggles the ds-input attribute from type="text" to type="password" and the ds-button class ds-button--icon-visible to ds-button--icon-hidden.

SDS only includes the styling - it is assumed the logic for switching will be implemented within the project locally.

<div class="ds-field">
  <label for="example-8" class="ds-label">Secret Value</label>
  <div class="ds-input">
    <input type="text" id="example-8" value="ABC123 XYZ890">
    <button id="test-button" class="ds-button --addon-light --hide-label --icon-visible" data-ds-password-toggle="example-8">
      <span>Toggle password</span>
    </button>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <label for="example-8" class="ds-label">Secret Value</label>
  <div class="ds-input">
    <input type="text" id="example-8" value="ABC123 XYZ890">
    <button id="test-button" class="ds-button --addon-light --hide-label --icon-visible" data-ds-password-toggle="example-8">
      <span>Toggle password</span>
    </button>
  </div>
</div>

Datetime–split 

<div class="ds-field">
  <label for="example-7a" class="ds-label">Label</label>
  <div>
    <div class="ds-text--addon">Text content</div>
    <div class="ds-input --datetime-split">
      <input id="example-7a" type="date" name="test" /><input type="time" name="test" />
    </div>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <label for="example-7a" class="ds-label">Label</label>
  <div>
    <div class="ds-text--addon">Text content</div>
    <div class="ds-input --datetime-split">
      <input id="example-7a" type="date" name="test" /><input type="time" name="test" />
    </div>
  </div>
</div>