Form
Input
Handle a complete form field with a label, placeholder and optional notice (which can also be used to display error messages).
Elements
The component is composed of multiple elements:
inputthe wrapperinput__labelfield labelinput__noticeoptional notice (which can also be used to display error messages)input__controlactual input
<div class="input input--focused">
<label for="input" class="input__label">Input</label>
<input type="text" id="input" class="input__control" placeholder="Placeholder">
</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 input--focused"
This is a notice
Error
Notify users that the field has an error.
class="input 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 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 input--required"