Base

Class	Description
.ui-field	Base class

Horizontal

Class	Description
.ui-field--horizontal	horizontal

Responsive

Class	Description
.ui-field--responsive	responsive

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-field-gap	0	Gap between children

<div class="ui-field">
  <label class="ui-label" for="password">Password</label>
  <div class="ui-field__control">
    <input class="ui-input" type="password" id="password"></input>
    <span class="ui-form-helper">Must be at least 8 characters</span>
  </div>
</div>

<div class="ui-field">
  <label class="ui-label" for="username">Username</label>
  <div class="ui-field__control">
    <input class="ui-input ui-input--error" type="text" id="username" value="ab"></input>
    <span class="ui-form-error">Username must be at least 3 characters</span>
  </div>
</div>

<!-- Label beside control for wider forms -->
<div class="ui-field ui-field--horizontal">
  <label class="ui-label ui-field__label" for="name">Full Name</label>
  <div class="ui-field__control">
    <input class="ui-input" type="text" id="name"></input>
    <span class="ui-form-helper">As it appears on your ID</span>
  </div>
</div>

<!-- Auto-switches to horizontal layout when container is wide enough (>= 30rem). Requires a parent with container-type: inline-size (use ui-container-inline utility). -->
<div class="ui-container-inline">
  <div class="ui-field ui-field--responsive">
    <label class="ui-label ui-field__label" for="resp-name">Full Name</label>
    <div class="ui-field__control">
      <input class="ui-input" type="text" id="resp-name"></input>
      <span class="ui-form-helper">Stacks vertically in narrow containers, horizontal at >= 30rem</span>
    </div>
  </div>
</div>

<div class="ui-field">
  <label class="ui-label ui-label--required" for="req">Required Field</label>
  <div class="ui-field__control">
    <input class="ui-input" type="text" id="req" required></input>
  </div>
</div>