Input - Select
Last updated: 9/21/21
Input Selects are used for choosing an option from a dropdown
Base
Use the base class pier-input-select to create a default input select
HTML markup
<select class="pier-input-select" 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>
Sizes
Use the modifier classes pier-input-select--sm, pier-input-select--md, or pier-input-select--lg to change the size of the input-select.
HTML markup
<select class="pier-input-select pier-input-select--sm" 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--md -m-t-4" 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--lg -m-t-4" 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>
Error
Use the modifier class pier-input-select--error to change the state of the input select to error.
HTML markup
<select class="pier-input-select pier-input-select--error" required="">
<option value="">Error</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>
Pill
Use the modifier class pier-input-select--pill to change the state of the input select to pill.
HTML markup
<select class="pier-input-select pier-input-select--pill" 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>
Disabled
Use the modifier class pier-input-select--disabled to change the state of the input select to disabled.
HTML markup
<select class="pier-input-select pier-input-select--disabled" 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>
Cap-Left
Use the modifier classes pier-input-select--cap-left to cap the left border radius to 0 and remove left border.
HTML markup
<select class="pier-input-select pier-input-select--cap-left" 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>
Cap-Right
Use the modifier classes pier-input-select--cap-right to cap the right border radius to 0 and remove right border.
HTML markup
<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>
Dark
Use the modifier class pier-input-select--dark to change the style of the input select for dark UI themes.
HTML markup
<select class="pier-input-select pier-input-select--dark" 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>
Error Dark
Use the modifier class pier-input-select--dark pier-input-select--error to change the style of the input select to error for dark UI themes.
HTML markup
<select
class="pier-input-select pier-input-select--error pier-input-select--dark"
required=""
>
<option value="">Error</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>
© 2021 Gumgum, Inc.
