Input - Group
Last updated: 9/20/21
Input groups are used for combining input elements with labels and validations
Base
Use the base class pier-input-group to create a default input group
HTML markup
<div class="pier-input-group">
<h4 class="pier-label">Text Input Label</h4>
<input type="text" class="pier-input-text" placeholder="Enter Text" />
</div>
Sizes
Use the modifier classes pier-input-group--sm, pier-input-group--md, or pier-input-group--lg to change the size of the input-group.
HTML markup
<div class="pier-input-group">
<h4 class="pier-label pier-label--sm">Text Input Label</h4>
<input
type="text"
class="pier-input-text pier-input-text--sm"
placeholder="Enter Text"
/>
<p class="pier-input-group__validation">*required</p>
</div>
<div class="pier-input-group">
<h4 class="pier-label pier-label--md">Text Input Label</h4>
<input
type="text"
class="pier-input-text pier-input-text--md"
placeholder="Enter Text"
/>
<p class="pier-input-group__validation">*required</p>
</div>
<div class="pier-input-group">
<h4 class="pier-label pier-label--lg">Text Input Label</h4>
<input
type="text"
class="pier-input-text pier-input-text--lg"
placeholder="Enter Text"
/>
<p class="pier-input-group__validation">*required</p>
</div>
Error
Use the modifier class pier-input-group--error to change the state of the input group to error.
HTML markup
<div class="pier-input-group">
<h4 class="pier-label pier-label--error-icon">Text Input Label</h4>
<input
type="text"
class="pier-input-text pier-input-text--error"
placeholder="Enter Text"
/>
<p class="pier-input-group__validation pier-input-group__validation--error">
*required
</p>
</div>
Validation
Use the modifier class pier-input-group--validation to change the state of the input group to with validation.
HTML markup
<div class="pier-input-group">
<h4 class="pier-label">Text Input Label</h4>
<input type="text" class="pier-input-text" placeholder="Enter Text" />
<p class="pier-input-group__validation">*required</p>
</div>
Dark
Use the modifier class pier-input-group--dark to change the state of the input group to dark.
HTML markup
<div class="pier-input-group pier-input-group--dark">
<h4 class="pier-label pier-label--dark">Text Input Label</h4>
<input
type="text"
class="pier-input-text pier-input-text--dark"
placeholder="Enter Text"
/>
<p class="pier-input-group__validation">*required</p>
</div>
© 2021 Gumgum, Inc.
