Settings Form
A long edit form in sections, saved as a whole (account, company, preferences).
Overview
- `SettingsForm`: a react-aria
Formthat only shows state the app owns, so react-hook-form or any other form state fits:isDirty(enables Save and Discard),isPending(spinner on Save,aria-busy) andonReset(adds a Discard button that should restore the saved values). - `SettingsSection`: groups fields under a
titleanddescription(a labelled group) stacked above them, leaving the width to the fields next to an app sidebar. The fields fall into a two-column grid when there's room (container query);col-span-fulltakes the whole row. - `SettingsFormFooter`: a save bar stuck to the bottom of the viewport with a polite status line (no changes / unsaved / saving), optional children before the buttons, Discard and Save.
Warning before leaving with unsaved changes stays in the app, since it depends on the router; use confirm-dialog.
Built-in text is in English; translate it with i18n.labels.
Installation
CLI
Manual
- 1
Register the @fma-ds namespace in components.json (once)
- 2
Add the item
Files land in
components/fma-ds/settings-form/settings-form.tsx; npm and registry dependencies are installed along with them.
Dependencies
- npm
- cn@^0.5.0react-aria-components@^1.22.1
- Registry
- @fma-ds/button@fma-ds/spinner