SDC Pattern Library

Input: Percentage

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="input-type input-type--percentage">
    <input class="input input--number input-type__input" data-qa="input-number" pattern="[0-9]*" id="answer" name="answer" value="">
    <abbr title="Percentage" class="input-type__type" id="answer-type">%</abbr>
</div>
 
{
  "label": "Percentage",
  "label_text": "%"
}