Input Addons

Pack name: seed-input

Input addons component pack for Seed

Contents

Install

npm install seed-input-addons --save

Dependencies


Input Addon

Input addons can be used with input components within control groups.

Example

Prefix
Suffix
<div class="o-control-group" role="group">
  <div class="c-input-addon">Prefix</div>
  <input class="c-input o-control-group__block" value="Input">
  <div class="c-input-addon">Suffix</div>
</div>

Sizes

Small

Prefix
Suffix
<div class="o-control-group" role="group">
  <div class="c-input-addon c-input-addon--sm">Prefix</div>
  <input class="c-input o-control-group__block c-input--sm" value="Input">
  <div class="c-input-addon c-input-addon--sm">Suffix</div>
</div>

Medium

Prefix
Suffix
<div class="o-control-group" role="group">
  <div class="c-input-addon c-input-addon--md">Prefix</div>
  <input class="c-input o-control-group__block c-input--md" value="Input">
  <div class="c-input-addon c-input-addon--md">Suffix</div>
</div>

Large

Prefix
Suffix
<div class="o-control-group" role="group">
  <div class="c-input-addon c-input-addon--lg">Prefix</div>
  <input class="c-input o-control-group__block c-input--lg" value="Input">
  <div class="c-input-addon c-input-addon--lg">Suffix</div>
</div>

Input Static

Static inputs are plain-text elements that are paired with input components. They share the same heights as inputs, which allows their text to be vertically aligned.

Example

Name:
<div class="o-inline">
  <div class="o-inline__item u-mrg-r-5">
    <div class="c-input-static">Name: </div>
  </div>
  <div class="o-inline__item">
    <input class="c-input" value="Captain">
  </div>
</div>

Sizes

Small

Name:
<div class="o-inline">
  <div class="o-inline__item u-mrg-r-5">
    <div class="c-input-static c-input-static--sm">Name: </div>
  </div>
  <div class="o-inline__item">
    <input class="c-input c-input--sm" value="Captain">
  </div>
</div>

Medium

Name:
<div class="o-inline">
  <div class="o-inline__item u-mrg-r-5">
    <div class="c-input-static c-input-static--md">Name: </div>
  </div>
  <div class="o-inline__item">
    <input class="c-input c-input--md" value="Captain">
  </div>
</div>

Large

Name:
<div class="o-inline">
  <div class="o-inline__item u-mrg-r-5">
    <div class="c-input-static c-input-static--lg">Name: </div>
  </div>
  <div class="o-inline__item">
    <input class="c-input c-input--lg" value="Captain">
  </div>
</div>