Form Elements
Buttons
There are multiple ways to implement buttons depending on the situation, while stil getting a consistent visual output. The .btn class and any variant classes can be applied to a link, button, or input HTML element.
Button Types
<a class="btn" href="#" role="button">Link</a>
<button class="btn" type="button">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">Button Styles
We have four standard button styles to be used across the site. The search button also has a special variant to add the angle to the button.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-search">Search</button>
<button type="button" class="btn btn-search btn-angle">Search with angle</button>Button Sizes
There are 3 standard sizes for buttons, based off of standard text sizes.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-wide">Wide button</button>Disabled Buttons
<button type="button" class="btn btn-primary" disabled="disabled">Disabled button</button>Inputs
Common inputs with :hover and :focus effects.
<div class="form-group">
<label for="example-text">Text</label>
<input type="text" id="example-text" placeholder="You need to put something here" required>
<span class="validation-message is-hidden">This field is required</span>
</div>
<div class="form-group">
<label for="example-email">Email</label>
<input type="email" id="example-email" placeholder="example@example.com" required>
<span class="validation-message">Must be a valid email address</span>
</div>
<div class="form-group">
<label for="example-url">URL (optional)</label>
<input type="url" id="example-url" placeholder="http://www.example.com">
<span class="validation-message is-hidden">This field is required</span>
</div>
<div class="form-group">
<label for="example-tel">Phone (optional)</label>
<input type="tel" id="example-tel" placeholder="###-###-####">
<span class="validation-message is-hidden">This field is required</span>
</div>
<div class="form-group">
<label for="example-search">Search</label>
<input type="search" id="example-search" placeholder="Enter your zip code to search" required>
<span class="validation-message is-hidden">This field is required</span>
</div>
<div class="form-group">
<label for="example-textarea">Textarea</label>
<textarea id="example-textarea" rows="3" placeholder="Write your message" required></textarea>
<span class="validation-message is-hidden">This field is required</span>
</div>
<div class="form-group">
<label for="example-disabled">Disabled</label>
<input type="text" id="example-disabled" disabled>
<span class="info-message">You must do something else first</span>
</div>Select / Dropdowns
Add the .select2-form class to <select> tags to apply our custom styles and behaviors to dropdowns. Requires jQuery and the Select2 javascript plugin.
<div class="form-group">
<label for="example-dropdown">Number Selection</label>
<select class="select2-form" id="example-dropdown">
<option value="" disabled selected hidden>Select a number</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>Checkboxes
Checkout boxes can be laid out either side by side or stacked. If the checkbox is accompanied by a label, both text an <input> tag should always be wrapped by a <label> tag to ensure that clicking on the label also selects the item.
Horizontal
<label>
<input type="checkbox" id="blankCheckbox1" value="option1">
Checkbox #1
</label>
<label>
<input type="checkbox" id="blankCheckbox2" value="option2">
Checkbox #2
</label>
<label>
<input type="checkbox" id="blankCheckbox3" value="option3" disabled>
Checkbox #3 (disabled)
</label>Stacked
<label class="stacked">
<input type="checkbox" id="blankCheckbox1" value="option1">
Checkbox #1
</label>
<label class="stacked">
<input type="checkbox" id="blankCheckbox2" value="option2">
Checkbox #2
</label>
<label class="stacked">
<input type="checkbox" id="blankCheckbox3" value="option3" disabled>
Checkbox #3 (disabled)
</label>Radio Buttons
Radio buttons can be laid out either side by side or stacked. If the radio button is accompanied by a label, both text an <input> tag should always be wrapped by a <label> tag to ensure that clicking on the label also selects the item.
Horizontal
<label>
<input type="radio" name="radio1" id="blankRadio1" value="option1">
Radio #1
</label>
<label>
<input type="radio" name="radio1" id="blankRadio2" value="option2">
Radio #2
</label>
<label>
<input type="radio" name="radio1" id="blankRadio3" value="option3" disabled>
Radio #3 (disabled)
</label>Stacked
<label class="stacked">
<input type="radio" name="radio2" id="blankRadio1" value="option1">
Radio #1
</label>
<label class="stacked">
<input type="radio" name="radio2" id="blankRadio2" value="option2">
Radio #2
</label>
<label class="stacked">
<input type="radio" name="radio2" id="blankRadio3" value="option3" disabled>
Radio #3 (disabled)
</label>Range Sliders
Range sliders should be used in situation where users can select from a range of values (such as price). The range slider on it's own will not display the value associated with the selection, so be sure to include a text version of the value that can be linked to the slider value.
All sliders are required to have a min value, max value, and initial value.
<div class="form-group text-version">
<label for="rate">Estimated Rate</label>
<input type="text" placeholder="1300" value="$150">
</div>
<div class="form-group range">
<input class="range" type="range" name="rate" min="0" max="100">
</div>