Base

Class	Description
.ui-form	Base class

Compact

Class	Description
.ui-form--compact	compact

Inline

Class	Description
.ui-form--inline	inline

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-form-spacing	var(--ui-space-3)	Spacing
--ui-form-actions-gap	var(--ui-space-2)	Actions gap
--ui-form-section-spacing	var(--ui-space-4)	Section spacing
--ui-form-spacing-compact	var(--ui-space-2)	Spacing compact
--ui-form-section-spacing-compact	var(--ui-space-3)	Section spacing compact

<!-- Group related fields using fieldset-based sections -->
<form class="ui-form">
  <fieldset class="ui-form__section">
    <legend class="ui-heading ui-heading--sm">Personal</legend>
    <div class="ui-field">
      <label class="ui-label" for="s-first">First name</label>
      <div class="ui-field__control">
        <input class="ui-input" type="text" id="s-first"></input>
      </div>
    </div>
    <div class="ui-field">
      <label class="ui-label" for="s-last">Last name</label>
      <div class="ui-field__control">
        <input class="ui-input" type="text" id="s-last"></input>
      </div>
    </div>
  </fieldset>
  <fieldset class="ui-form__section">
    <legend class="ui-heading ui-heading--sm">Account</legend>
    <div class="ui-field">
      <label class="ui-label" for="s-email">Email</label>
      <div class="ui-field__control">
        <input class="ui-input" type="email" id="s-email"></input>
      </div>
    </div>
    <div class="ui-field">
      <label class="ui-label" for="s-pass">Password</label>
      <div class="ui-field__control">
        <input class="ui-input" type="password" id="s-pass"></input>
      </div>
    </div>
  </fieldset>
  <div class="ui-form__actions">
    <button class="ui-button">Create account</button>
  </div>
</form>

<!-- Tighter spacing for dense interfaces -->
<form class="ui-form ui-form--compact">
  <div class="ui-field">
    <label class="ui-label" for="c-user">Username</label>
    <div class="ui-field__control">
      <input class="ui-input" type="text" id="c-user"></input>
    </div>
  </div>
  <div class="ui-field">
    <label class="ui-label" for="c-pass">Password</label>
    <div class="ui-field__control">
      <input class="ui-input" type="password" id="c-pass"></input>
    </div>
  </div>
  <div class="ui-form__actions">
    <button class="ui-button">Log in</button>
  </div>
</form>

<!-- Horizontal layout for short forms like search or filters -->
<form class="ui-form ui-form--inline">
  <div class="ui-field">
    <label class="ui-label" for="i-search">Search</label>
    <div class="ui-field__control">
      <input class="ui-input" type="search" id="i-search" placeholder="Search..."></input>
    </div>
  </div>
  <div class="ui-field">
    <label class="ui-label" for="i-cat">Category</label>
    <div class="ui-field__control">
      <select class="ui-select" id="i-cat">
        <option>All</option>
        <option>Articles</option>
        <option>Products</option>
      </select>
    </div>
  </div>
  <div class="ui-form__actions">
    <button class="ui-button">Filter</button>
  </div>
</form>

<!-- Combining form layout with field error states -->
<form class="ui-form">
  <div class="ui-field">
    <label class="ui-label ui-label--required" for="v-email">Email</label>
    <div class="ui-field__control">
      <input class="ui-input ui-input--error" type="email" id="v-email" value="not-an-email"></input>
      <span class="ui-form-error">Enter a valid email address</span>
    </div>
  </div>
  <div class="ui-field">
    <label class="ui-label ui-label--required" for="v-pass">Password</label>
    <div class="ui-field__control">
      <input class="ui-input" type="password" id="v-pass"></input>
      <span class="ui-form-helper">Must be at least 8 characters</span>
    </div>
  </div>
  <div class="ui-form__actions">
    <button class="ui-button">Sign up</button>
    <button class="ui-button ui-button--ghost" type="button">Reset</button>
  </div>
</form>