<label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-slate-500 checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-navy-400 dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>پیش‌فرض</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>اولیه</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-secondary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-secondary-light dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>ثانویه</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-info checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>اطلاعاتی</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-success checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>موفقیت</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-warning checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>هشدار</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-error checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>خطا</span>
  </label>
              

                
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:bg-slate-500 checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-navy-400 dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>پیش‌فرض</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>اولیه</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:bg-secondary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-secondary-light dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>ثانویه</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:!bg-info checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>اطلاعاتی</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:!bg-success checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>موفقیت</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:!bg-warning checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>هشدار</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:!bg-error checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>خطا</span>
  </label>
              

                
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:border-slate-500 checked:before:bg-slate-500 dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-navy-200 dark:checked:before:bg-navy-200"
      type="checkbox"
    />
    <span>پیش‌فرض</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:border-primary checked:before:bg-primary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-accent dark:checked:before:bg-accent"
      type="checkbox"
    />
    <span>اولیه</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:border-secondary checked:before:bg-secondary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-secondary-light dark:checked:before:bg-secondary-light"
      type="checkbox"
    />
    <span>ثانویه</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:!border-info checked:before:!bg-info dark:border-navy-400 dark:before:bg-navy-300"
      type="checkbox"
    />
    <span>اطلاعاتی</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:!border-success checked:before:!bg-success dark:border-navy-400 dark:before:bg-navy-300"
      type="checkbox"
    />
    <span>موفقیت</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:!border-warning checked:before:!bg-warning dark:border-navy-400 dark:before:bg-navy-300"
      type="checkbox"
    />
    <span>هشدار</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:!border-error checked:before:!bg-error dark:border-navy-400 dark:before:bg-navy-300"
      type="checkbox"
    />
    <span>خطا</span>
  </label>
              

                
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-slate-100 before:rounded-full before:bg-slate-300 checked:border-slate-500 checked:before:bg-slate-500 dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-400 dark:checked:border-navy-200 dark:checked:before:bg-navy-200"
      type="checkbox"
    />
    <span>پیش‌فرض</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-slate-100 before:rounded-full before:bg-slate-300 checked:border-primary checked:before:bg-primary dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-400 dark:checked:border-accent dark:checked:before:bg-accent"
      type="checkbox"
    />
    <span>اولیه</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-slate-100 before:rounded-full before:bg-slate-300 checked:border-secondary checked:before:bg-secondary dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-400 dark:checked:border-secondary-light dark:checked:before:bg-secondary-light"
      type="checkbox"
    />
    <span>ثانویه</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-slate-100 before:rounded-full before:bg-slate-300 checked:!border-info checked:before:!bg-info dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-400"
      type="checkbox"
    />
    <span>اطلاعاتی</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-slate-100 before:rounded-full before:bg-slate-300 checked:!border-success checked:before:!bg-success dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-400"
      type="checkbox"
    />
    <span>موفقیت</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-slate-100 before:rounded-full before:bg-slate-300 checked:!border-warning checked:before:!bg-warning dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-400"
      type="checkbox"
    />
    <span>هشدار</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-slate-100 before:rounded-full before:bg-slate-300 checked:!border-error checked:before:!bg-error dark:border-navy-500 dark:bg-navy-900 dark:before:bg-navy-400"
      type="checkbox"
    />
    <span>خطا</span>
  </label>
              

                
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-lg border border-slate-400/70 bg-transparent before:rounded-md before:bg-slate-300 checked:border-slate-500 checked:before:bg-slate-500 dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-navy-200 dark:checked:before:bg-navy-200"
      type="checkbox"
    />
    <span>پیش‌فرض</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-lg border border-slate-400/70 bg-transparent before:rounded-md before:bg-slate-300 checked:border-primary checked:before:bg-primary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-accent dark:checked:before:bg-accent"
      type="checkbox"
    />
    <span>اولیه</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-lg border border-slate-400/70 bg-transparent before:rounded-md before:bg-slate-300 checked:border-secondary checked:before:bg-secondary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-secondary-light dark:checked:before:bg-secondary-light"
      type="checkbox"
    />
    <span>ثانویه</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-lg border border-slate-400/70 bg-transparent before:rounded-md before:bg-slate-300 checked:!border-info checked:before:!bg-info dark:border-navy-400 dark:before:bg-navy-300"
      type="checkbox"
    />
    <span>اطلاعاتی</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-lg border border-slate-400/70 bg-transparent before:rounded-md before:bg-slate-300 checked:!border-success checked:before:!bg-success dark:border-navy-400 dark:before:bg-navy-300"
      type="checkbox"
    />
    <span>موفقیت</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-lg border border-slate-400/70 bg-transparent before:rounded-md before:bg-slate-300 checked:!border-warning checked:before:!bg-warning dark:border-navy-400 dark:before:bg-navy-300"
      type="checkbox"
    />
    <span>هشدار</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch is-outline h-5 w-10 rounded-lg border border-slate-400/70 bg-transparent before:rounded-md before:bg-slate-300 checked:!border-error checked:before:!bg-error dark:border-navy-400 dark:before:bg-navy-300"
      type="checkbox"
    />
    <span>خطا</span>
  </label>
              

                
  <label class="inline-flex items-center  space-x-2">
    <input
      disabled
      class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-slate-500 checked:before:bg-white disabled:pointer-events-none disabled:select-none disabled:opacity-60 dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-navy-400 dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>پیش‌فرض</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      checked
      disabled
      class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white disabled:pointer-events-none disabled:select-none disabled:opacity-60 dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>اولیه</span>
  </label>

              

                
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-3.5 w-7 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
      type="checkbox"
    />
    <span class="text-xs">کوچک</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>عادی</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-switch h-7 w-14 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
      type="checkbox"
    />
    <span class="text-base">بزرگ</span>
  </label>

              

                
  <label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-switch h-5 w-10 rounded-full bg-slate-300 [--thumb-border:6px] before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>برچسب</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-switch h-5 w-10 rounded-full bg-slate-300 [--thumb-border:5px] before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>برچسب</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-switch h-5 w-10 rounded-full bg-slate-300 [--thumb-border:4px] before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>برچسب</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-switch h-5 w-10 rounded-full bg-slate-300 [--thumb-border:3px] before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>برچسب</span>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
      type="checkbox"
    />
    <span>برچسب</span>
  </label>
              

                
  <div x-data="{selected:[]}">
    <div class="grid grid-cols-2 place-items-start gap-6 sm:grid-cols-3">
      <label class="inline-flex items-center  space-x-2">
        <input
          value="Orange"
          x-model="selected"
          class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>پرتقال</span>
      </label>
      <label class="inline-flex items-center  space-x-2">
        <input
          value="Raspberry"
          x-model="selected"
          class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>تمشک</span>
      </label>
      <label class="inline-flex items-center  space-x-2">
        <input
          value="Melon"
          x-model="selected"
          class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
          type="checkbox"
        />
        <span>خربزه</span>
      </label>
    </div>
    <p class="mt-2">مقدار: <span x-text="selected"></span></p>
  </div>
              

                
  <div x-data="{active:true}" class="mt-5">
    <label class="inline-flex items-center  space-x-2">
      <input
        x-model="active"
        class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
        type="checkbox"
      />
      <span>گزینه</span>
    </label>
    <p class="mt-2">مقدار: <span x-text="active"></span></p>
  </div>