settings
Settings
Settings card: switches in titled groups, each with a hint, disabled where an option is not available, and reset and save actions.
States: Default
Parts
| Part | File | Does |
|---|---|---|
| Settings | Settings.vue | Lets the shopper turn grouped options on or off, then save or reset the changes. |
Install
Writes 3 files into components/sections/settings/. For agents, npx @frontic/ui docs settings prints this reference as markdown; the MCP server serves the same.
Built from
API reference
Settings Settings.vue
Lets the shopper turn grouped options on or off, then save or reset the changes.
| Prop | Type | Default | |
|---|---|---|---|
| groups* | SettingsGroup[] | — | |
| title | string | 'Settings' | |
| description | string | — | |
| resetLabel | string | 'Reset' | |
| saveLabel | string | 'Save changes' | |
| surface | 'raised' | 'bare' | 'raised' | |
| class | ClassValue | — | |
| modelValue | Record<string, boolean> | {} | |
| Event | Payload | |
|---|---|---|
| update:modelValue | value: Record<string, boolean> | |
| save | enabled: Record<string, boolean> | |
| Data attribute | Values | |
|---|---|---|
| data-surface | 'raised' | 'bare' | |
Example