Textarea

Styling for a textarea field. This component uses the same structure as the input component.

Elements

To use it, add a textarea class added to the input wrapper:

  • input textarea the wrapper
    • input__label field label
    • input__notice optional notice (which can also be used to display error messages)
    • input__control actual input
<div class="input textarea">
  <label for="example" class="input__label">Textarea</label>
  <textarea name="example" id="example" rows="4" class="input__control"></textarea>
</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 textarea input--focused"

Error

Notify users that the field has an error.

class="input textarea 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 textarea 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 textarea input--required"