For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/settings-layout.md.
A3S UI
  • English
  • next

      • 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.

      Live previewHTML · CSS · JavaScript

      General

      Identity and network defaults for this gateway.

      Usage

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

      Parameters

      ParameterDefaultPurpose
      --settings-navigation-size14remNavigation column width
      --settings-sticky-offset1remSticky navigation top offset
      --settings-section-gap1.5remGap between configuration sections
      aria-current="page"—Marks the active settings destination

      Variants and states

      The layout becomes a horizontally scrollable section list below 768px. Form state belongs to child primitives: required, disabled, aria-invalid, validation messages, dirty-state badges, and save feedback.

      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.