Settings
SettingsPreference
A labeled toggle row for boolean user preferences, with optional description and loading state.
Settings
The Settings category provides two layout-aware row components designed for settings and account pages. They follow a consistent two-column layout (text on the left, control on the right) and are intended to be composed inside UCard containers or plain div wrappers.
Components
<XASettingsPreference />
A horizontal row that pairs a label and optional description on the left with a USwitch toggle on the right. Supports v-model for the boolean value, disabled, and loading states. Extra classes can be injected via containerClass, labelClass, and descriptionClass.
<UCard>
<template #header>Notification Preferences</template>
<div class="divide-y divide-neutral-200 dark:divide-neutral-800">
<XASettingsPreference
v-model="prefs.emailNotifications"
label="Email Notifications"
description="Receive email updates about your account activity."
class="py-4"
/>
<XASettingsPreference
v-model="prefs.marketingEmails"
label="Marketing Emails"
description="Tips, product updates, and offers."
class="py-4"
:loading="saving"
/>
<XASettingsPreference
v-model="prefs.smsAlerts"
label="SMS Alerts"
description="Critical alerts sent via text message."
class="py-4"
:disabled="!prefs.phoneVerified"
/>
</div>
</UCard>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | Boolean | false | v-model for the toggle state |
label | String | required | Preference label text |
description | String | '' | Description text shown below the label |
disabled | Boolean | false | Disable the toggle |
loading | Boolean | false | Show loading state on the toggle |
containerClass | String | '' | Additional classes for the root element |
labelClass | String | '' | Additional classes for the label |
descriptionClass | String | '' | Additional classes for the description |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | boolean | Toggle state changed |
AI Context
component: XASettingsPreference
package: "@xenterprises/nuxt-x-app"
category: Settings
use-when: >
Use XASettingsPreference for any boolean toggle on settings pages —
notifications, feature flags, privacy options, or app preferences.
Designed to be stacked inside a UCard with a divide-y layout.