Last updated: 9/20/21
Forms are a user interface (UI) element that allows the user to send information to a server.
Use the base class pier-form
to create a default form
<form class="pier-form"> <h4 class="pier-label pier-label--md -m-b-3">Name</h4> <input type="text" class="pier-input-text -m-b-7" placeholder="Enter Text" /> <h4 class="pier-label pier-label--md -m-b-3">Select</h4> <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> <p class="pier-input-group__validation -m-t-2 -m-b-7">*required</p> <h4 class="pier-label pier-label--md -m-b-3">Text Input Label</h4> <textarea class="pier-input-textarea pier-input-textarea--form" placeholder="Enter Text" ></textarea ><label class="pier-input-checkbox -m-t-8 -m-r-9" ><input type="checkbox" class="pier-input-checkbox__input" name="example-1" value="" /> <div class="pier-input-checkbox__indicator"></div> <span class="pier-input-checkbox__label">Test 1</span></label ><label class="pier-input-checkbox" ><input type="checkbox" class="pier-input-checkbox__input" name="example-1" value="" /> <div class="pier-input-checkbox__indicator"></div> <span class="pier-input-checkbox__label">Test 2</span></label > <div class="pier-input-group -m-t-8"> <h4 class="pier-label pier-label--md -m-b-2">Radio Input Label</h4> <label class="pier-input-radio" ><input type="radio" class="pier-input-radio__input" name="example-1" value="" /> <div class="pier-input-radio__indicator"></div> <span class="pier-input-radio__label">Test 1</span></label ><label class="pier-input-radio -m-l-9" ><input type="radio" class="pier-input-radio__input" name="example-1" value="" /> <div class="pier-input-radio__indicator"></div> <span class="pier-input-radio__label">Test 2</span></label ><label class="pier-input-radio -m-l-9" ><input type="radio" class="pier-input-radio__input" name="example-1" value="" /> <div class="pier-input-radio__indicator"></div> <span class="pier-input-radio__label">Test 3</span></label > <p class="pier-input-group__validation -m-t-2">*required</p> </div> <label class="pier-input-toggle -m-t-7" ><input type="checkbox" class="pier-input-toggle__input" name="example-1" value="" /> <div class="pier-input-toggle__indicator"></div> <span class="pier-input-toggle__label">Test Toggle</span></label > <div class="-m-v-7"> <button class="pier-button-hero"> <span class="pier-button-hero__content">Submit</span> </button> </div> </form>
© 2021 Gumgum, Inc.