Patterns

Settings form

Compose Migoy controls into an editable form with validation, saving, and feedback.

Preview

This pattern composes Input, Select, Switch, Field, Button, and Spinner. Change a setting to enable Save and Cancel. Submit a short display name to see validation and focus return to the field. A valid save briefly disables editing, then announces completion. Cancel restores the last saved values.

Workspace settings

Manage your profile and preferences. This example saves only in memory.

Use at least two characters.

Opened when you sign in.

Include workspace activity in your email updates.

Change a setting to enable saving. Reloading resets this demo.

Installation

pnpm dlx shadcn@latest add http://127.0.0.1:3017/r/settings-form.json

This installs the pattern and its Migoy dependencies using your configured component and UI paths. Review changes before installing over customized components. Your theme is preserved; the Migoy theme is opt-in. These are local development URLs. The registry payload includes the complete editable source; the preview uses that same source.

Product integration

The example stores values only in memory and simulates an 800ms save. Reloading resets it. Replace that simulation with your product's server operation before adoption. Validate the display name, allowed workspace, and permissions on the server. Handle request failure with an accessible error, restore editing in a finally block, and retain unsaved values so the user can retry. Only update the saved baseline after success.

The initial defaults belong to this demo. Load real settings from your product and pass them into your adapted component. The notification switch is saved with the rest of this form; it does not send email or apply a server change immediately.

Behavior to preserve

  • Every control has a visible label and stable IDs; helper and error text are explicitly linked.
  • Invalid submission focuses the display name and announces its error.
  • Save and Cancel stay disabled when there are no changes or a save is pending.
  • Pending submission locks Input, Select, and Switch; the button shows Spinner and a progress label.
  • The status region announces completion and cancellation without moving focus.
  • Cancel restores the last successful values, not just the initial defaults.

Scroll Fade

Indicate hidden content at the edges of a scrollable region.

Releases

Track published changes and decide when to update.

On this page

PreviewInstallationProduct integrationBehavior to preserve