Form
Select
Styling for a select box. This component uses the same structure as the input component.
Elements
To use it, add a select class added to the input wrapper:
input selectthe wrapperinput__labelfield labelinput__noticeoptional notice (which can also be used to display error messages)input__controlactual input
<div class="input input--focused select">
<label for="select" class="input__label">Select</label>
<select name="select" id="select" class="input__control">
<option value=""></option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>
</div>Properties
Add classes to the wrapper class to change the style of the component.
Focused
Focus a specific input on page load.
class="input select input--focused"
Error
Notify users that the field has an error.
class="input select js--error"
Disabled
Add this class to signal users the field is disabled. Include pallote.js file to your project to automatically add the disabled attribute.
class="input select input--disabled"
Required
Add this class to signal users the field is required. Include pallote.js file to your project to automatically add the required attribute.
class="input select input--required"