#Settings Layout

Settings Layout provides navigable configuration sections with real form controls. It is intended for operational configuration, preferences, policy, providers, routing, and other structured settings.

npm install @a3s-lab/ui@0.4.0

<div class="settings-layout">
  <aside><nav aria-label="Settings sections">...</nav></aside>
  <main><section id="general">...</section></main>
</div>

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

#Usage

<div class="settings-layout">
  <aside><nav aria-label="Settings sections">...</nav></aside>
  <main><section id="general">...</section></main>
</div>

#Parameters

#Variants and states

The layout uses a fixed secondary navigation boundary and an independently scrolling content pane. Below 768px, navigation becomes a bounded horizontal section list. Form state belongs to child primitives: required, disabled, aria-invalid, validation messages, dirty-state badges, and save feedback. Compose Setting Row when controls should align on a stable label-control grid.

#Accessibility

Use real form controls and field labels; do not replace configuration with an unstructured source editor. Keep advanced raw configuration as an optional escape hatch. Each section needs a unique heading and ID so navigation can deep-link to it.