Textarea

Preview

This is textarea field description. 
<div class="sui-form-field">

	<label for="unique-id" id="label-unique-id" class="sui-label">Field Label</label>

	<textarea
		placeholder="Enter a placeholder"
		id="unique-id"
		class="sui-form-control"
		aria-labelledby="label-unique-id"
		aria-describedby="error-unique-id description-unique-id"
	></textarea>

	<!--
	NOTE:
	Notice error message element it is empty. This because content should be printed
	when error happens and not before to avoid screenreaders confusing users.
	-->
	<span id="error-unique-id" class="sui-error-message" style="display: none;"></span>

	<span id="description-unique-id" class="sui-description">Enter description here.</span>

</div>
This is an error message. This is textarea field description. 
<div class="sui-form-field sui-form-field-error">

	<label for="unique-id" id="label-unique-id" class="sui-label">Field Label</label>

	<textarea
		placeholder="Enter a placeholder"
		id="unique-id"
		class="sui-form-control"
		aria-labelledby="label-unique-id"
		aria-describedby="error-unique-id description-unique-id"
	></textarea>

	<!--
	NOTE:
	When field gets error state you should print error message on element below
	and also make sure to focus input with JS in case inline error message is in use.
	-->
	<span id="error-unique-id" class="sui-error-message">Enter error message here.</span>

	<span id="description-unique-id" class="sui-description">Enter description here.</span>

</div>