Form Field

Wrapper styles for labels, hints, inline layouts, readonly views, and error propagation in @bnotk/dsx.

Live Preview

Import

<link rel="stylesheet" href="@bnotk/dsx/css/form-field.css">

This module is usually paired with inputs.css and select.css so descendant .dsx-input, .dsx-textarea, and .dsx-select elements inherit the wrapper states.

Classes

Class	Purpose
`.dsx-field`	Base vertical field wrapper
`.dsx-field__label`	Label text
`.dsx-field__label--required`	Adds a red `*` after the label
`.dsx-field__hint`	Secondary helper text
`.dsx-field__error`	Error message row
`.dsx-field__control`	Flexible slot used by inline layouts
`.dsx-field--error`	Applies error styling to nested inputs / textareas / selects
`.dsx-field--disabled`	Muted label state
`.dsx-field--inline`	Side-by-side label/control layout
`.dsx-field--readonly`	Readonly preview mode
`.dsx-field__value`	Readonly value text block

Behavior

Base fields are stacked with var(--ds2-space-1) gaps.
Required labels append a red asterisk with ::after.
Error wrappers add an inset error border to nested .dsx-input, .dsx-textarea, and .dsx-select controls.
Inline fields reserve 8rem for the label and let .dsx-field__control grow.
Readonly mode styles .dsx-field__value with a bottom border.

Example

<div class="dsx-field">
  <label class="dsx-field__label dsx-field__label--required" for="customer-name">Customer name</label>
  <input class="dsx-input" id="customer-name" type="text" aria-describedby="customer-name-hint">
  <div class="dsx-field__hint" id="customer-name-hint">Shown on invoices and reports.</div>
</div>

Accessibility notes

Connect labels to controls with for / id.
Link hints and errors with aria-describedby.
Add aria-invalid="true" on the control when .dsx-field--error is present.
Use readonly text only when the field is not meant to be interactive.