Textarea

The textarea shares the usage of the GenshiInput class as well, considering it is very similar to the text field. As long as the GenshiInput__control tag is applied to a textarea, it will be rendered in a consistent way with other text fields.

<div class="GenshiInput">
  <label class="GenshiInput__label">
    Summary
    <textarea class="GenshiInput__control" placeholder="Summary of the content"></textarea>
  </label>
  <small class="GenshiInput__helper">This will be presented as the SEO tag.</small>
</div>
This will be presented as the SEO tag.

Monospace

Apply the GenshiInput--mono modifier to the text field in order to render it using monospaced fonts.

Disabled and read only

Add the disabled attribute to the <textarea> tag to disable the text field.

You cannot modify a message that has already been sent.

You can also add the readonly attribute to the <textarea> tag to mark it as read-only.

You can copy this snippet.

Icons

You can add icons to the text field by making sure that the <textarea> field is wrapped in a GenshiInput__control element. Then, attach an SVG with the GenshiInput__icon class, either before or after the input field.

Validation

For validation purposes you can add the aria-invalid="true" or aria-invalid="false" to the field. If you are going to do this, it is recommended to include an icon, to convey the validation status without depending on color.

Your bio requires at least 5 words.
People are not ready for facts.

Sizes

Use the GenshiInput--xs, GenshiInput--sm, GenshiInput--lg and GenshiInput--lg to alter the font size.