Form Helper

Helper text for form fields. Provides additional context or instructions.

Default

Must be at least 8 characters

Base

Class	Description
`.ui-form-helper`	Base class

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-form-helper-color`	`var(--ui-color-text-muted)`	Text color
`--ui-form-helper-size`	`var(--ui-font-size-sm)`	Overall size
`--ui-form-helper-gap`	`0`	Gap between children

With Input Field

We will never share your email

<!-- Helper text paired with a form input for context. -->
<div class="ui-column ui-column--xs">
  <input class="ui-input" type="email" placeholder="Email address"></input>
  <span class="ui-form-helper">We will never share your email</span>
</div>

Error State

Password must be at least 8 characters

<!-- Helper text styled for validation errors using the input error context. -->
<div class="ui-column ui-column--xs">
  <input class="ui-input ui-input--error" type="text" value="abc"></input>
  <span class="ui-form-helper" style="color: var(--ui-color-danger);">Password must be at least 8 characters</span>
</div>

Success State

Password strength: strong

<!-- Helper text for successful validation. -->
<div class="ui-column ui-column--xs">
  <input class="ui-input ui-input--success" type="text" value="strongpassword123"></input>
  <span class="ui-form-helper" style="color: var(--ui-color-success);">Password strength: strong</span>
</div>

With Select

Required for shipping calculations

<!-- Helper text paired with a select field. -->
<div class="ui-column ui-column--xs">
  <select class="ui-select">
    <option>Choose a country</option>
    <option>United States</option>
    <option>Canada</option>
  </select>
  <span class="ui-form-helper">Required for shipping calculations</span>
</div>