Soracom

Design System
  1. Home
  2. Design system
  3. Containers
  4. Field

Field

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

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

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

html
Copy 
<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.

html
Copy 
<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.

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

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

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

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

html
Copy 
<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.

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

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

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

html
Copy 
<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.

html
Copy 
<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.

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

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

html
Copy 
<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="ds-menu">
      <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>
html
Copy 
<!-- 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>