Huesos
Style
Guide

Repositoire

GitHub

Preview

Textarea

Use in conjunction with .form-item and its modifiers (see its own section). It is specially advised to use .form-item--label-top and .form-item--label-bottom

It is recommended to set a minimum rows value of 5. A min-height will prevent textareas from looking too similar to an input[type="text"] element.

Example

<div class="form-item form-item--label-top">
    <label for="area1">Textarea</label>
    <textarea rows="5" id="area1"></textarea>
</div>
<div class="form-item form-item--label-inside form-item--label-bottom">
    <label for="area2">Textarea</label>
    <textarea rows="5" id="area2"></textarea>
</div>
<div class="form-item form-item--label-inside form-item--col">
    <label for="area3">Textarea</label>
    <textarea id="area3"></textarea>
</div>

Assets

  • Filesystem Path: src/components/forms/textarea/_textarea.scss
  • Size: 132 Bytes 
  • textarea {
	@include form-border($input-border-strategy);
	@include form-reset-textarea();
	width:100%;
	min-height: $spacer * 2;
}