Toggle Setting List

Installation

Variants

Props

Files installed (1)

• components/blocks/ToggleSettingList.tsx2 kB

  Copy

  'use client'
  
  import * as React from 'react'
  import { SectionCard } from '@/components/ui/section-card'
  
  export interface ToggleSettingListProps {
    title?: string
    description?: string
    /** Rendered top-right of the header (e.g. an icon node). */
    headerIcon?: React.ReactNode
    className?: string
    children?: React.ReactNode
  }
  
  export function ToggleSettingList({ title, description, headerIcon, className, children }: ToggleSettingListProps) {
    return (
      <SectionCard
        data-slot="toggle-setting-list"
        title={title ?? 'Notifications'}
        description={description}
        className={className}
        headerAction={headerIcon}
      >
        <ul className="-my-4 divide-y">{children}</ul>
      </SectionCard>
    )
  }
  
  export interface ToggleSettingRowProps {
    label: string
    desc?: string
    checked?: boolean
    onCheckedChange?: (checked: boolean) => void
  }
  
  /** One controlled switch row. Hold state in the parent and wire `checked` + `onCheckedChange` per row. */
  export function ToggleSettingRow({ label, desc, checked, onCheckedChange }: ToggleSettingRowProps) {
    return (
      <li className="flex items-center justify-between gap-4 py-4 first:pt-0">
        <div>
          <p className="text-sm font-medium">{label}</p>
          {desc && <p className="text-muted-foreground text-xs">{desc}</p>}
        </div>
        <button
          type="button"
          role="switch"
          aria-label={label}
          aria-checked={checked}
          className={[
            'focus-visible:ring-ring relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors focus:outline-none focus-visible:ring-2',
            checked ? 'bg-primary' : 'bg-muted-foreground/30',
          ].join(' ')}
          onClick={() => onCheckedChange?.(!checked)}
        >
          <span
            className={[
              'bg-background inline-block size-4 translate-y-0.5 rounded-full shadow transition-transform',
              checked ? 'translate-x-[18px]' : 'translate-x-0.5',
            ].join(' ')}
          />
        </button>
      </li>
    )
  }
  

Raw manifest:https://uipkge.dev/r/react/toggle-setting-list.json