SettingsToggle

Radix

Animated

A 2nd-order composition of Switch + Separator. Displays a setting label and description on the left with a toggle switch on the right. Optional separator for use in lists.

Form Inputssettingstoggleswitchpreferenceconfig

Settings list

import { SettingsToggle } from '@primstack/ui/settings-toggle'

<SettingsToggle
  title="Email notifications"
  description="Receive email when someone mentions you"
  defaultChecked
  withSeparator
/>
<SettingsToggle
  title="Push notifications"
  description="Receive push notifications on your device"
/>

Notification setting

import { SettingsToggle } from '@primstack/ui'

<SettingsToggle
  label="Email notifications"
  description="Receive email alerts for important events"
  checked={emailEnabled}
  onCheckedChange={setEmailEnabled}
/>

Related Components