Inputs

Default

Insert a country name that starts with A letter. 
<div class="sui-form-field">

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

	<input
		placeholder="Placeholder"
		id="unique-id"
		class="sui-form-control"
		aria-labelledby="label-unique-id"
		aria-describedby="error-unique-id description-unique-id"
	/>

	<!--
	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;" role="alert"></span>

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

</div>
Insert a country name that starts with A letter. 
<div class="sui-form-field">

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

	<input
		placeholder="Placeholder"
		id="unique-id"
		class="sui-form-control"
		aria-labelledby="label-unique-id"
		aria-describedby="error-unique-id description-unique-id"
		disabled
	/>

	<!--
	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;" role="alert"></span>

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

</div>
The country name inserted is not valid. Insert a country name that starts with A letter. 
<div class="sui-form-field sui-form-field-error">

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

	<input
		placeholder="Placeholder"
		id="unique-id"
		class="sui-form-control"
		aria-labelledby="label-unique-id"
		aria-describedby="error-unique-id description-unique-id"
	/>

	<!--
	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" role="alert">Enter error message here.</span>

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

</div>

Notice on the markup we do two things for input error state: add sui-form-field-error class to sui-form-field element and print error message inside sui-error-message element.

In addition to that we print remove display: none inline style and focus input element.

IMPORTANT: Inputs must always have a label but there are times when this is not part of the design, for those cases we keep label for input but hidden replacing sui-label with sui-screen-reader-text class.