Text Fields

Text fields allow users to enter, and select text within a field. Text fields can also lookup data via auto-completion, such as a search field.

Standard

Container(s) .input-text-wrap
Modifiers .is-required .is-error .is-disabled .is-valid
States .is-focused .has-value
<div class="input-text-wrap">
<label class="input-text-label" for="input-text-example-default">Username</label>
<input type="text" id="input-text-example-default">
</div>
view raw text-input.html hosted with ❤ by GitHub

Guidelines

  • Labels should be title case and ≤ 20 characters.
  • Info hint and error text should be sentence case and ≤ 90 characters.
  • Info hint and error text should be used to coach the user about valid input, but should not act as a replacement for input masking and validation.
  • Ensure label is raised when field is pre-populated or autofilled by the browser.
  • Prefer field-level error messages when checking for presence and format of data
Don't use long labels.
Don't allow autofilled content to overlap the label.

Info

Make sure you choose an awesome username.
Username is a required field.
Passwords should be 8 or more characters with at least one number and one symbol.
Passwords should be 8 or more characters with at least one number and one symbol.
Container(s) .input-text-wrap
Modifiers .is-required .is-error .is-disabled .is-valid .is-invalid .danger
HTML Elements span.input-info
<div class="input-text-wrap">
<label class="input-text-label" for="input-text-example-muted">Username</label>
<input type="text" id="input-text-example-muted">
<span class="input-info">Make sure you choose an awesome username.</span>
</div>

Tooltip

Container(s) .input-text-wrap
HTML Elements div.input-info-tooltip
<div class="input-text-wrap">
<label class="input-text-label" for="input-text-example-ccv">CCV</label>
<input type="text" id="input-text-example-ccv">
<div class="input-info-tooltip">
<span data-tooltip="The CCV number is a 3 or 4 digit security code printed on the front or back of your card." data-tooltip-pos="right" data-tooltip-length="large">
<i class="sg-icon sg-icon-info-circle input-info-icon" id="input-info-ccv"></i>
</span>
</div>
</div>

Units

Container(s) .input-text-wrap
Required .has-units [data-units]="unit"
Modifiers .has-space-top .has-space-right .has-space-bottom .has-space-left .has-arrow-top .has-arrow-right .has-arrow-bottom .has-arrow-left .is-required .is-error .is-disabled
States .is-focused .has-value
<div class="input-text-wrap has-units has-space-top" data-units="px">
<label class="input-text-label" for="input-text-example-required">Padding</label>
<input type="text" id="input-text-example-required">
</div>

Large

Container(s) .input-text-wrap
Required .is-large
<div class="input-text-wrap is-large">
<label class="input-text-label" for="input-text-example-large">Campaign Name</label>
<input type="text" id="input-text-example-large">
</div>

Textarea

Please enter the details of your request.
Container(s) .textarea-wrap
Required .textarea-input
Modifiers .is-required .is-error .is-disabled .is-scrollable
States .is-focused .has-value
<div class="textarea-wrap is-required">
<label class="textarea-label" for="textarea-required">Description</label>
<textarea class="textarea-input" id="textarea-required" data-max-height="250"></textarea>
</div>