Password

Simple

Password field has two different states. Try them by clicking on the tabs below:

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

	<label
		for="unique-id"
		id="label-unique-id"
		class="sui-label"
	>
		Field label <a href="#" class="sui-label-link">with link</a>
	</label>

	<input
		type="password"
		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;"></span>

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

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

	<label
		for="unique-id"
		id="label-unique-id"
		class="sui-label"
	>
		Field label <a href="#" class="sui-label-link">with link</a>
	</label>

	<input
		type="password"
		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">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 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, remove display: none inline styles from error message, also don't forget to focus input element.