Input addons
Input addons component pack for Seed
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>Configurations
Below are the default Sass configuration variables for seed-input-addons. The variables can be found in the pack’s _config.scss file.
seed-input-addons/_config.scss// Namespaces
$seed-input-addons-input-addon-namespace: c-input-addon !default;
$seed-input-addons-input-static-namespace: c-input-static !default;
// Configs
$seed-input-addons-input-addon-background-color: #F1F3F5 !default;