18Switch language to العربية

Settings Toggle Row

PreviousNext

A settings row with label, description, and toggle switch.

import { SettingsToggleRow } from "@/components/atom/settings-toggle-row"

export default function SettingsToggleRowDemo() {
  return (
    <>
      <div className="w-full max-w-md">
        <SettingsToggleRow
          label="Notifications"
          description="Receive email notifications"
        />
      </div>
    </>
  )
}

Installation

pnpm dlx shadcn@latest add @codebase/settings-toggle-row

Usage

import { SettingsToggleRow } from "@/components/atom/settings-toggle-row"
<SettingsToggleRow
  label="Notifications"
  description="Receive email notifications"
/>

Examples

Multiple Settings

Receive updates

Mobile notifications

<SettingsToggleRow label="Email" description="Receive updates" defaultChecked />
<SettingsToggleRow label="Push" description="Mobile notifications" />