UIPackage
Vue React

Toggle Setting List

block dashboard
Edit on GitHub

List of toggle-able settings in a SectionCard. v-model binds a Record<string, boolean> keyed by item.key.

Also available for React ->

Installation

$ npx shadcn-vue@latest add https://uipkge.dev/r/vue/toggle-setting-list.json

Or with the named registry: npx shadcn-vue@latest add @uipkge/toggle-setting-list

Examples

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

SettingRow 
interface SettingRow {
  key: string
  label: string
  desc?: string
}

npm dependencies

lucide-vue-next

Includes

section-card

Files (1)

  • app/components/blocks/ToggleSettingList.vue 1.9 kB 
    <script setup lang="ts">
import type { Component } from 'vue'
import { SectionCard } from '@/components/ui/section-card'

interface SettingRow {
  key: string
  label: string
  desc?: string
}

const props = defineProps<{
  title?: string
  description?: string
  headerIcon?: Component
  items: SettingRow[]
  modelValue: Record<string, boolean>
  class?: string
}>()

const emit = defineEmits<{ 'update:modelValue': [Record<string, boolean>] }>()

function toggle(key: string) {
  emit('update:modelValue', { ...props.modelValue, [key]: !props.modelValue[key] })
}
</script>

<template>
  <SectionCard :title="title ?? 'Notifications'" :description="description" :class="$props.class">
    <template v-if="headerIcon" #header-action>
      <component :is="headerIcon" class="text-muted-foreground size-5" />
    </template>
    <ul class="-my-4 divide-y">
      <li
        v-for="(row, i) in items"
        :key="row.key"
        class="flex items-center justify-between gap-4 py-4"
        :class="i === 0 ? 'pt-0' : ''"
      >
        <div>
          <p class="text-sm font-medium">{{ row.label }}</p>
          <p v-if="row.desc" class="text-muted-foreground text-xs">{{ row.desc }}</p>
        </div>
        <button
          type="button"
          role="switch"
          :aria-checked="modelValue[row.key]"
          class="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"
          :class="modelValue[row.key] ? 'bg-primary' : 'bg-muted-foreground/30'"
          @click="toggle(row.key)"
        >
          <span
            class="bg-background inline-block size-4 translate-y-0.5 rounded-full shadow transition-transform"
            :class="modelValue[row.key] ? 'translate-x-[18px]' : 'translate-x-0.5'"
          />
        </button>
      </li>
    </ul>
  </SectionCard>
</template>

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