Skip to content

Settings and preferences

Preview Available in release assets

Edit server-authoritative profile and preference values through grouped native controls with explicit save and cancel behavior.

Server contract

Use .thin-settings on a real method/action form, .thin-settings-section for semantic groups, and native names/values. The application owns authorization, validation, concurrency/version checks, persistence, and audit. Datastar enhancement is optional.

Real links and server-submitted forms retain complete authentication and preference workflows without Datastar or JavaScript.

Settings and preferences primary example

Show code
<form class="thin-settings" id="account-settings" action="/api/advanced/auth-settings?flow=settings" method="post" data-on:submit="@post('/api/advanced/auth-settings?flow=settings')">
  <h1>Settings</h1>
  <section class="thin-settings-section">
    <h2>Profile</h2>
    <label class="thin-field">Display name<input class="thin-input" name="display_name" value="Ryan" autocomplete="name" maxlength="80" />
  </label>
</section>
<section class="thin-settings-section">
  <h2>Preferences</h2>
  <div class="thin-choice-row">
    <input class="thin-choice" id="weekly-digest" type="checkbox" name="weekly_digest" value="yes" checked>
    <label for="weekly-digest">Weekly digest</label>
  </div>
  <label class="thin-field">Time zone<select class="thin-select" name="timezone">
  <option value="America/Chicago" selected>Central time</option>
  <option value="America/New_York">Eastern time</option>
</select>
</label>
</section>
<div class="thin-settings-actions">
  <button class="thin-button">Save settings</button>
  <a href="/account">Cancel</a>
</div>
</form>

Anatomy

  • Page/form heading
  • Thematic settings sections
  • Native labelled controls
  • Current server values
  • Save submit
  • Durable cancel link
  • Server status/error region

Variants and sizes

  • Account profile
  • Notification preferences
  • Locale and time zone
  • Security settings

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Unchanged
  • Dirty
  • Pending
  • Saved
  • Validation error
  • Conflict or stale version
  • Forbidden setting
  • Long localized values
  • Network failure
  • Reconnect after morph

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Native controls edit a local form buffer; Save posts named values and the server validates permissions, versions, and domain rules before returning authoritative values. Cancel navigates without saving. Optional Datastar patches the full form or stable section and must reconcile conflicts rather than silently overwrite.

Accessibility

Group related settings with headings or fieldsets, label every control, expose saved/error text, preserve focus, and do not rely on auto-save as the only path. Explain destructive or security-sensitive changes and require server confirmation where appropriate.

Contract
NATIVE
Basis
Native labelled forms, inputs, checkboxes, selects, and recovery links
Evidence
  • tests/unit/library/auth-settings-recipes.test.ts

API

Use .thin-settings on a real method/action form, .thin-settings-section for semantic groups, and native names/values. The application owns authorization, validation, concurrency/version checks, persistence, and audit. Datastar enhancement is optional.

Behavior tier: datastar-optional

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Real links and server-submitted forms retain complete authentication and preference workflows without Datastar or JavaScript.

Assets and dependencies

  • /components.css

Dependencies: None

Source: packages/ui/src/items/auth-settings/style.ts

Composition

Derived from the examples and style specs, not authored.

Composes