Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

template · settings-page

Settings page

A Mado page recipe for native profile, locale and preference controls with explicit descriptions and application-owned persistence.

Install with npx @madojs/ui@latest add settings-page.

Template

Settings page

Composition

  • Adapt the static settings route into a page header and one native form divided into labelled form sections, fieldsets, fields and settings rows.
  • Replace initial values, options, action and persistence at copy time; keep localized labels and native control structure.

Public API

export default Page
Route-ready settings page.
export settingsPageView()
Directly previewable native settings form.
element form / fieldset / input / select / textarea
Browser-owned submission, grouping, validation and reset baseline.

Accessibility contract

  • Each section follows the page heading hierarchy, related choices use fieldset/legend, and every control has an explicit label.
  • Supporting descriptions are connected with aria-describedby; saving, errors and success remain explicit application responsibilities.

Keyboard

  • The template adds no page-wide keyboard model; native links, forms and controls keep their browser-defined behavior.

Focus

  • The consuming route layout owns navigation focus. Keep one meaningful data-mado-focus target and do not focus arbitrary content updates.

Fallback

  • The native form and reset controls remain usable, but the copied action must be connected to a real application boundary before production.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.