Skip to content

Soracom

Design System
Home Design System Containers Field

Field

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

stable dark-mode

Overview 

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

Options 

Basic usage 

Example using div container 
<div class="ds-field">
  <label for="sample-2" class="ds-text --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-text --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 label container 
<label class="ds-field">
  <div class="ds-text --label">Label content</div>
  <div class="ds-input">
    <input type="text" />
  </div>
  <div class="ds-text">Text content</div>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<label class="ds-field">
  <div class="ds-text --label">Label content</div>
  <div class="ds-input">
    <input type="text" />
  </div>
  <div class="ds-text">Text content</div>
</label>

Required fields 

See Required fields

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-text --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-text --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-text --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-text --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-text --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-text --label">Label content</label>
  <div class="ds-input">
    <input id="sample-7" type="text" />
  </div>
  <div class="ds-text">Text content</div>
</div>

Examples 

Multiple inline (joined) controls  

<div class="ds-controls">
  <div class="ds-bar">    
    <i class="ds-icon --xsmall --icon-filter"></i>
    <div class="ds-field">
      <div>
        <div class="ds-select --small --12-w">
          <select>
            <option value="vpgId">VPG ID</option>
            <option value="ipAddress">IP Address</option>
            <option value="key">Key</option>
            <option value="status">Status</option>
          </select>
        </div>
        <div class="ds-input --small --18-w">
          <input type="text" placeholder="Filter"/>
        </div>
        <div class="ds-select --small --10-w">
          <select>
            <option value="success">Success</option>
            <option value="error">Error</option>
            <option value="pending">Pending</option>
          </select>
        </div>
        <button class="ds-button --small --addon">
          <span>Add</span>
        </button>
      </div>
    </div>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<div class="ds-controls">
  <div class="ds-bar">    
    <i class="ds-icon --xsmall --icon-filter"></i>
    <div class="ds-field">
      <div>
        <div class="ds-select --small --12-w">
          <select>
            <option value="vpgId">VPG ID</option>
            <option value="ipAddress">IP Address</option>
            <option value="key">Key</option>
            <option value="status">Status</option>
          </select>
        </div>
        <div class="ds-input --small --18-w">
          <input type="text" placeholder="Filter"/>
        </div>
        <div class="ds-select --small --10-w">
          <select>
            <option value="success">Success</option>
            <option value="error">Error</option>
            <option value="pending">Pending</option>
          </select>
        </div>
        <button class="ds-button --small --addon">
          <span>Add</span>
        </button>
      </div>
    </div>
  </div>
</div>

File upload with intro text  

<label class="ds-field">
  <div class="ds-text --huge --color-ink-tint">
    <i class="ds-icon --icon-cloud-upload --xlarge --color-ink"></i>
    Drop files here
  </div>
  <div class="ds-text --large">or</div>
  <div class="ds-input">
    <input type="file"/>
  </div>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<label class="ds-field">
  <div class="ds-text --huge --color-ink-tint">
    <i class="ds-icon --icon-cloud-upload --xlarge --color-ink"></i>
    Drop files here
  </div>
  <div class="ds-text --large">or</div>
  <div class="ds-input">
    <input type="file"/>
  </div>
</label>

File upload, banner and intro text  

<div class="ds-group">
  <div class="ds-tag --pinned --info"><span>CSV</span></div>
  <header class="ds-banner --color-ink-lighter">
    <div class="ds-rows --gap-xsmall">
      <div class="ds-text">Upload a CSV file using the following format:</div>
      <div class="ds-input --code" style="--ds-input-background-color: var(--color-ink-darkest);--ds-input-text-color: var(--color-light-dark); --ds-input-border-radius: 5px;">
        <input type="text" name="test" value="vpg_id,ip_address,key" readonly/>
      </div>
    </div>
  </header>
  <label class="ds-field">
    <div class="ds-text --huge --color-ink-tint">
      <i class="ds-icon --icon-cloud-upload --xlarge --color-ink"></i>
      Drop files here
    </div>
    <div class="ds-text --large">or</div>
    <div class="ds-input">
      <input type="file"/>
    </div>
  </label>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<div class="ds-group">
  <div class="ds-tag --pinned --info"><span>CSV</span></div>
  <header class="ds-banner --color-ink-lighter">
    <div class="ds-rows --gap-xsmall">
      <div class="ds-text">Upload a CSV file using the following format:</div>
      <div class="ds-input --code" style="--ds-input-background-color: var(--color-ink-darkest);--ds-input-text-color: var(--color-light-dark); --ds-input-border-radius: 5px;">
        <input type="text" name="test" value="vpg_id,ip_address,key" readonly/>
      </div>
    </div>
  </header>
  <label class="ds-field">
    <div class="ds-text --huge --color-ink-tint">
      <i class="ds-icon --icon-cloud-upload --xlarge --color-ink"></i>
      Drop files here
    </div>
    <div class="ds-text --large">or</div>
    <div class="ds-input">
      <input type="file"/>
    </div>
  </label>
</div>

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-text --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-text --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-text --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-text --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-text --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 --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-text --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 --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-text --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-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-text --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-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-text --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-text --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 --bottom"></i>
  <div class="ds-field --bottom">
    <div class="ds-input --icon-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-text --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 --bottom"></i>
  <div class="ds-field --bottom">
    <div class="ds-input --icon-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-text --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-text --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-text --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-text --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>

Tests 

Field with inline menubutton 
<div class="ds-field">
  <div class="ds-text --label">Label content</div>
  <details class="ds-menubutton --inline" open>
    <summary>
      <span class="ds-button --primary --icon-settings">
        <span>Button label</span>
      </span>
    </summary>
    <div class="__content">
      <ul>
        <li>
          <a href="#">Change email</a>
        </li>
        <li>
          <a href="#">Contact information</a>
        </li>
        <li>
          <a href="#">Billing</a>
        </li>
        <li>
          <a href="#">Payment settings</a>
        </li>
      </ul>
    </div>
  </details>
  <div class="ds-text">Text content</div>
</div>
Visual Tests
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<div class="ds-field">
  <div class="ds-text --label">Label content</div>
  <details class="ds-menubutton --inline" open>
    <summary>
      <span class="ds-button --primary --icon-settings">
        <span>Button label</span>
      </span>
    </summary>
    <div class="__content">
      <ul>
        <li>
          <a href="#">Change email</a>
        </li>
        <li>
          <a href="#">Contact information</a>
        </li>
        <li>
          <a href="#">Billing</a>
        </li>
        <li>
          <a href="#">Payment settings</a>
        </li>
      </ul>
    </div>
  </details>
  <div class="ds-text">Text content</div>
</div>
<!-- Default -->
<label class="ds-field">
  <div class="ds-text --label">Label content</div>
  <div class="ds-input">
    <input type="text" />
  </div>
  <div class="ds-text">Text content</div>
</label>
<!-- Wide -->
<label class="ds-field">
  <div class="ds-text --label">Label content</div>
  <div class="ds-input --wide">
    <input type="text" />
  </div>
  <div class="ds-text">Text content</div>
</label>
<!-- Mid -->
<label class="ds-field">
  <div class="ds-text --label">Label content</div>
  <div class="ds-input --mid">
    <input type="text" />
  </div>
  <div class="ds-text">Text content</div>
</label>
<!-- Narrow -->
<label class="ds-field">
  <div class="ds-text --label">Label content</div>
  <div class="ds-input --narrow">
    <input type="text" />
  </div>
  <div class="ds-text">Text content</div>
</label>
Visual Tests
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Default -->
<label class="ds-field">
  <div class="ds-text --label">Label content</div>
  <div class="ds-input">
    <input type="text" />
  </div>
  <div class="ds-text">Text content</div>
</label>
<!-- Wide -->
<label class="ds-field">
  <div class="ds-text --label">Label content</div>
  <div class="ds-input --wide">
    <input type="text" />
  </div>
  <div class="ds-text">Text content</div>
</label>
<!-- Mid -->
<label class="ds-field">
  <div class="ds-text --label">Label content</div>
  <div class="ds-input --mid">
    <input type="text" />
  </div>
  <div class="ds-text">Text content</div>
</label>
<!-- Narrow -->
<label class="ds-field">
  <div class="ds-text --label">Label content</div>
  <div class="ds-input --narrow">
    <input type="text" />
  </div>
  <div class="ds-text">Text content</div>
</label>
Copyright © 2015-2024 Soracom, Inc.
Last page update: January 22, 2024
fa6d8d65