SDC Pattern Library

Input: Text

Rationale

Inputs are used wherever users enter answers to surveys.

Variants

Text

Units and Currency

Additional specialist variants of the standard text input are the unit, currency and percentage

Checkbox

Radio

Context

Context vary for each input but label is used for human readable aspect and ‘label_text’ is input content.

Scope

Global

Dependencies

  • /components/02-form-elements/input/_input.scss
  • /components/02-form-elements/input-type/_input-type.scss
<div class="field">
    <label class="label venus " for="text-input">
      Enter some text
  </label>
    <input class="input input--text" type="text" id="text-input" />
</div>
 
{
  "label": "Textfield",
  "label_text": "Enter some text",
  "label_for": "text-input",
  "label_inline": null
}