#Setting Row

Setting Row aligns a setting label, direct description, control, and optional validation message on a stable grid. Group rows in Setting List inside Settings Layout.

npm install @a3s-lab/ui@0.4.1

<div class="setting-list">
  <div class="setting-row">
    <div data-setting-identity>
      <strong>Language</strong>
      <p>Choose the interface language.</p>
    </div>
    <div data-setting-control>
      <select class="select">
        ...
      </select>
    </div>
    <p data-setting-message>...</p>
  </div>
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

<div class="setting-list">
  <div class="setting-row">
    <div data-setting-identity>
      <strong>Language</strong>
      <p>Choose the interface language.</p>
    </div>
    <div data-setting-control>
      <select class="select">
        ...
      </select>
    </div>
    <p data-setting-message>...</p>
  </div>
</div>

#Parameters

#States and variants

Child controls own focus, disabled, loading, checked, and read-only state. The row owns the relationship between identity, control, and error recovery. It stacks without changing DOM order below 640px.

#Accessibility

Associate the control with a native label or explicit ARIA labeling. Descriptions and error messages use aria-describedby; invalid controls also use aria-invalid="true".