Components

Form fields

Flat, bordered inputs with uppercase labels and tabular numerics. Wrap a control in ds-field to style it by descent, or apply ds-input directly. Numeric inputs right-align with ds-input--number.

Fields

A ds-field stacks an uppercase label over a control. Use ds-input--number for compact, right-aligned numeric entry.

Select · number

Entity

Day rate

<div class="ds-field">
  <label for="entity">Entity</label>
  <select class="ds-input" id="entity"><option>LBC_FR</option><option>LBC_US</option></select>
</div>
<div class="ds-field">
  <label for="rate">Day rate</label>
  <input class="ds-input ds-input--number" id="rate" type="number" value="900">
</div>

Context bar

A ds-context-bar lays a row of fields above the content they scope, bottom-aligned with a rule beneath.

Row of fields

Entity

Day rate

<div class="ds-context-bar">
  <div class="ds-field">
    <label for="entity">Entity</label>
    <select class="ds-input" id="entity"><option>LBC_FR</option><option>LBC_US</option></select>
  </div>
  <div class="ds-field">
    <label for="rate">Day rate</label>
    <input class="ds-input ds-input--number" id="rate" type="number" value="900">
  </div>
</div>

Labeled rows

A ds-input-row sets a label on the left and a control on the right, separated by a soft rule. Add a ds-input-row__unit for a trailing unit.

Label · value

Day rate €

Salary cost €

<div class="ds-input-row">
  <label for="rate">Day rate <span class="ds-input-row__unit">€</span></label>
  <input class="ds-input ds-input--number" id="rate" type="number" value="900">
</div>
<div class="ds-input-row">
  <label for="salary">Salary cost <span class="ds-input-row__unit">€</span></label>
  <input class="ds-input ds-input--number" id="salary" type="number" value="420">
</div>