Input - Combo
Last updated: 9/20/21
Combo inputs are used for combining input elements with button elements
Input Combo Group
Use the class pier-input-combo to create a default input combo group
HTML markup
<div class="pier-input-combo">
<input
type="text"
class="pier-input-text pier-input-text--cap-left"
placeholder="Enter Text"
/><button class="pier-button-hero pier-button-hero--cap-right">
<span class="pier-button-hero__content">Submit</span>
</button>
</div>
Input Select Combo Group
Use the class pier-input-combo to combine multiple select inputs and buttons.
HTML markup
<div class="pier-input-combo">
<select class="pier-input-select pier-input-select--cap-right" required="">
<option value="">Select your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option></select
><select class="pier-input-select pier-input-select--cap" required="">
<option value="">Select your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option></select
><select class="pier-input-select pier-input-select--cap" required="">
<option value="">Select your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option></select
><button class="pier-button-standard pier-button-standard--cap-left">
Submit
</button>
</div>
© 2021 Gumgum, Inc.
