Field

Field labels, hints, native inputs, groups, errors, and affixes. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• field, field-label, field-hint, input, textarea, field-group, field-legend, field-row
• field-error, input-shell, input-shell--grid, input-affix, input-affix--inline-start, input-affix--inline-end, input-affix--block-start, input-affix--block-end
• floating-label, textarea--autosize

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<div class="field">
  <label class="field-label" for="email">Email</label>
  <input class="input" id="email" name="email" type="email" aria-describedby="email-hint">
  <p class="field-hint" id="email-hint">We use this for account notices.</p>
</div>

Variants and composition

field-group and field-row arrange related controls. input-shell–grid supports inline and block affix modifiers. floating-label and textarea–autosize are separate opt-in presentations.

input-shell input-shell--grid expects one direct input or textarea and direct input-affix parts. Inline edge modifiers follow RTL. Grid and edge conditions compose, for example input-shell--grid@md with input-affix--block-start@!sm input-affix--inline-start@sm. Root overrides must match its modifier specificity, such as p:2@[.input-shell&].

field-row permits long labels to wrap. floating-label keeps its label visible and unscaled; give the label a background matching the input so its border does not cross the text.

Validation messages

<div class="field">
  <label class="field-label" for="project-name">Project name</label>
  <input class="input" id="project-name" name="projectName" required aria-describedby="project-name-error" />
  <p class="field-error text-color:failure-950" id="project-name-error">Enter a project name.</p>
</div>

Put field-error directly in .field, after its invalid source. The source can be a direct input, textarea, or select, or a direct input-shell, floating-label, or field-row containing a direct invalid control. :user-invalid or a non-false aria-invalid reveals the message; a direct wrapper can also declare the ARIA state. Nested fields, deeper controls, and affix inputs do not trigger an outer error.

Hidden errors reserve their space. Add vis:hidden to explicitly suppress the automatic display, or manage visibility yourself for another structure. The application owns validation text, state, and aria-describedby.

Behavior and accessibility

Associate labels, hints, and errors with native inputs. Affix buttons stay interactive; a grid shell with controls should use a div wrapper rather than a wrapping label.

Reference

See the interactive Storybook specimen ↗. Continue to File Input or return to the Official preset overview.