Form Controls

On/off controls: checkboxes, radio buttons, and toggles.

Checkbox

Custom checkboxes with label, description, and color support.

Checkbox Basics

Accept terms Subscribe to newsletter Disabled option

<label class="checkbox">
  <input type="checkbox" class="checkbox-input" checked />
  <span class="checkbox-box">
    <svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="checkbox-label">Accept terms</span>
</label>

<label class="checkbox">
  <input type="checkbox" class="checkbox-input" />
  <span class="checkbox-box">
    <svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="checkbox-label">Subscribe to newsletter</span>
</label>

<label class="checkbox checkbox-disabled">
  <input type="checkbox" class="checkbox-input" disabled />
  <span class="checkbox-box">
    <svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="checkbox-label">Disabled option</span>
</label>

Requires: ux.min.css

<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1" style="min-height: 2.75rem;">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-md peer-checked:bg-primary peer-checked:border-primary transition-colors">
    <svg class="hidden peer-checked:block size-3.5 text-primary-content" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="text-base text-base-content">Accept terms</span>
</label>

<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1" style="min-height: 2.75rem;">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" />
  <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-md peer-checked:bg-primary peer-checked:border-primary transition-colors">
    <svg class="hidden peer-checked:block size-3.5 text-primary-content" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="text-base text-base-content">Subscribe to newsletter</span>
</label>

<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1 opacity-50 pointer-events-none" style="min-height: 2.75rem;">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" disabled />
  <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-md">
    <svg class="hidden size-3.5 text-primary-content" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="text-base text-base-content">Disabled option</span>
</label>

Requires: tw.min.css

// No JavaScript required — use native <input type="checkbox">
// For indeterminate state:
// document.querySelector('.checkbox-input').indeterminate = true;

Checkbox Colors

Primary Success Warning Error

<label class="checkbox color-primary">
  <input type="checkbox" class="checkbox-input" checked />
  <span class="checkbox-box">
    <svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="checkbox-label">Primary</span>
</label>

<label class="checkbox color-success">
  <input type="checkbox" class="checkbox-input" checked />
  <span class="checkbox-box">
    <svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="checkbox-label">Success</span>
</label>

<label class="checkbox color-warning">
  <input type="checkbox" class="checkbox-input" checked />
  <span class="checkbox-box">
    <svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="checkbox-label">Warning</span>
</label>

<label class="checkbox color-error">
  <input type="checkbox" class="checkbox-input" checked />
  <span class="checkbox-box">
    <svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="checkbox-label">Error</span>
</label>

Requires: ux.min.css

<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1" style="min-height: 2.75rem;">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-md peer-checked:bg-primary peer-checked:border-primary transition-colors">
    <svg class="hidden peer-checked:block size-3.5 text-primary-content" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="text-base">Primary</span>
</label>

<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1" style="min-height: 2.75rem;">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-md peer-checked:bg-success peer-checked:border-success transition-colors">
    <svg class="hidden peer-checked:block size-3.5 text-success-content" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="text-base">Success</span>
</label>

<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1" style="min-height: 2.75rem;">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-md peer-checked:bg-warning peer-checked:border-warning transition-colors">
    <svg class="hidden peer-checked:block size-3.5 text-warning-content" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="text-base">Warning</span>
</label>

<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1" style="min-height: 2.75rem;">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-md peer-checked:bg-error peer-checked:border-error transition-colors">
    <svg class="hidden peer-checked:block size-3.5 text-error-content" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="text-base">Error</span>
</label>

Requires: tw.min.css

// No JavaScript required — use native <input type="checkbox">

Checkbox Sizes

Small Default Large

<label class="checkbox checkbox-sm">
  <input type="checkbox" class="checkbox-input" checked />
  <span class="checkbox-box">
    <svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="checkbox-label">Small</span>
</label>

<label class="checkbox">
  <input type="checkbox" class="checkbox-input" checked />
  <span class="checkbox-box">
    <svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="checkbox-label">Default</span>
</label>

<label class="checkbox checkbox-lg">
  <input type="checkbox" class="checkbox-input" checked />
  <span class="checkbox-box">
    <svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="checkbox-label">Large</span>
</label>

Requires: ux.min.css

<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative flex items-center justify-center shrink-0 size-[1.125rem] border-2 border-base-300 rounded peer-checked:bg-primary peer-checked:border-primary transition-colors">
    <svg class="hidden peer-checked:block size-2.5 text-primary-content" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="text-base">Small</span>
</label>

<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-md peer-checked:bg-primary peer-checked:border-primary transition-colors">
    <svg class="hidden peer-checked:block size-3.5 text-primary-content" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="text-base">Default</span>
</label>

<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative flex items-center justify-center shrink-0 size-7 border-2 border-base-300 rounded-md peer-checked:bg-primary peer-checked:border-primary transition-colors">
    <svg class="hidden peer-checked:block size-[1.125rem] text-primary-content" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
  </span>
  <span class="text-base">Large</span>
</label>

Requires: tw.min.css

// No JavaScript required — pure CSS component

Round Checkbox & Group

Notifications Email notifications Push notifications SMS notifications

<div class="checkbox-group">
  <span class="checkbox-group-label">Notifications</span>
  <label class="checkbox checkbox-round color-success">
    <input type="checkbox" class="checkbox-input" checked />
    <span class="checkbox-box">
      <svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
    </span>
    <span class="checkbox-label">Email notifications</span>
  </label>
  <label class="checkbox checkbox-round color-success">
    <input type="checkbox" class="checkbox-input" />
    <span class="checkbox-box">
      <svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
    </span>
    <span class="checkbox-label">Push notifications</span>
  </label>
  <label class="checkbox checkbox-round color-success">
    <input type="checkbox" class="checkbox-input" checked />
    <span class="checkbox-box">
      <svg class="checkbox-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
    </span>
    <span class="checkbox-label">SMS notifications</span>
  </label>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-2">
  <span class="text-sm font-medium text-base-content/60 mb-2">Notifications</span>
  <label class="inline-flex items-start gap-3 cursor-pointer select-none py-1">
    <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
    <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-full peer-checked:bg-success peer-checked:border-success transition-colors">
      <svg class="hidden peer-checked:block size-3.5 text-success-content" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
    </span>
    <span class="text-base">Email notifications</span>
  </label>
  <label class="inline-flex items-start gap-3 cursor-pointer select-none py-1">
    <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" />
    <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-full peer-checked:bg-success peer-checked:border-success transition-colors">
      <svg class="hidden peer-checked:block size-3.5 text-success-content" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
    </span>
    <span class="text-base">Push notifications</span>
  </label>
  <label class="inline-flex items-start gap-3 cursor-pointer select-none py-1">
    <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
    <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-full peer-checked:bg-success peer-checked:border-success transition-colors">
      <svg class="hidden peer-checked:block size-3.5 text-success-content" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
    </span>
    <span class="text-base">SMS notifications</span>
  </label>
</div>

Requires: tw.min.css

// No JavaScript required — pure CSS component

Radio

Custom radio buttons for single-select option groups.

Radio Basics

Free plan Pro plan Enterprise (coming soon)

<div class="radio-group">
  <label class="radio">
    <input type="radio" name="plan" class="radio-input" checked />
    <span class="radio-circle">
      <span class="radio-dot"></span>
    </span>
    <span class="radio-label">Free plan</span>
  </label>
  <label class="radio">
    <input type="radio" name="plan" class="radio-input" />
    <span class="radio-circle">
      <span class="radio-dot"></span>
    </span>
    <span class="radio-label">Pro plan</span>
  </label>
  <label class="radio">
    <input type="radio" name="plan" class="radio-input" disabled />
    <span class="radio-circle">
      <span class="radio-dot"></span>
    </span>
    <span class="radio-label">Enterprise (coming soon)</span>
  </label>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-2">
  <label class="inline-flex items-start gap-3 cursor-pointer select-none py-1" style="min-height: 2.75rem;">
    <input type="radio" name="plan-tw" class="absolute opacity-0 w-0 h-0 peer" checked />
    <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-full peer-checked:border-primary transition-colors">
      <span class="size-3 rounded-full bg-primary scale-0 peer-checked:scale-100 transition-transform"></span>
    </span>
    <span class="text-base">Free plan</span>
  </label>
  <label class="inline-flex items-start gap-3 cursor-pointer select-none py-1" style="min-height: 2.75rem;">
    <input type="radio" name="plan-tw" class="absolute opacity-0 w-0 h-0 peer" />
    <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-full peer-checked:border-primary transition-colors">
      <span class="size-3 rounded-full bg-primary scale-0 peer-checked:scale-100 transition-transform"></span>
    </span>
    <span class="text-base">Pro plan</span>
  </label>
  <label class="inline-flex items-start gap-3 cursor-pointer select-none py-1 opacity-50 pointer-events-none" style="min-height: 2.75rem;">
    <input type="radio" name="plan-tw" class="absolute opacity-0 w-0 h-0 peer" disabled />
    <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-full">
      <span class="size-3 rounded-full bg-primary scale-0"></span>
    </span>
    <span class="text-base">Enterprise (coming soon)</span>
  </label>
</div>

Requires: tw.min.css

// No JavaScript required — use native <input type="radio">
// Group radios with the same "name" attribute for mutual exclusion.

Radio Colors

Primary Success Warning Error

<label class="radio color-primary">
  <input type="radio" name="color-radio" class="radio-input" checked />
  <span class="radio-circle"><span class="radio-dot"></span></span>
  <span class="radio-label">Primary</span>
</label>
<label class="radio color-success">
  <input type="radio" name="color-radio2" class="radio-input" checked />
  <span class="radio-circle"><span class="radio-dot"></span></span>
  <span class="radio-label">Success</span>
</label>
<label class="radio color-warning">
  <input type="radio" name="color-radio3" class="radio-input" checked />
  <span class="radio-circle"><span class="radio-dot"></span></span>
  <span class="radio-label">Warning</span>
</label>
<label class="radio color-error">
  <input type="radio" name="color-radio4" class="radio-input" checked />
  <span class="radio-circle"><span class="radio-dot"></span></span>
  <span class="radio-label">Error</span>
</label>

Requires: ux.min.css

<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1">
  <input type="radio" name="cr1" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-full peer-checked:border-primary">
    <span class="size-3 rounded-full bg-primary scale-0 peer-checked:scale-100 transition-transform"></span>
  </span>
  <span class="text-base">Primary</span>
</label>
<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1">
  <input type="radio" name="cr2" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-full peer-checked:border-success">
    <span class="size-3 rounded-full bg-success scale-0 peer-checked:scale-100 transition-transform"></span>
  </span>
  <span class="text-base">Success</span>
</label>
<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1">
  <input type="radio" name="cr3" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-full peer-checked:border-warning">
    <span class="size-3 rounded-full bg-warning scale-0 peer-checked:scale-100 transition-transform"></span>
  </span>
  <span class="text-base">Warning</span>
</label>
<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1">
  <input type="radio" name="cr4" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-full peer-checked:border-error">
    <span class="size-3 rounded-full bg-error scale-0 peer-checked:scale-100 transition-transform"></span>
  </span>
  <span class="text-base">Error</span>
</label>

Requires: tw.min.css

// No JavaScript required — pure CSS component

Radio Sizes

Small Default Large

<label class="radio radio-sm">
  <input type="radio" name="rsize" class="radio-input" checked />
  <span class="radio-circle"><span class="radio-dot"></span></span>
  <span class="radio-label">Small</span>
</label>
<label class="radio">
  <input type="radio" name="rsize2" class="radio-input" checked />
  <span class="radio-circle"><span class="radio-dot"></span></span>
  <span class="radio-label">Default</span>
</label>
<label class="radio radio-lg">
  <input type="radio" name="rsize3" class="radio-input" checked />
  <span class="radio-circle"><span class="radio-dot"></span></span>
  <span class="radio-label">Large</span>
</label>

Requires: ux.min.css

<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1">
  <input type="radio" name="rs1" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative flex items-center justify-center shrink-0 size-[1.125rem] border-2 border-base-300 rounded-full peer-checked:border-primary">
    <span class="size-2 rounded-full bg-primary scale-0 peer-checked:scale-100 transition-transform"></span>
  </span>
  <span class="text-base">Small</span>
</label>
<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1">
  <input type="radio" name="rs2" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative flex items-center justify-center shrink-0 size-6 border-2 border-base-300 rounded-full peer-checked:border-primary">
    <span class="size-3 rounded-full bg-primary scale-0 peer-checked:scale-100 transition-transform"></span>
  </span>
  <span class="text-base">Default</span>
</label>
<label class="inline-flex items-start gap-3 cursor-pointer select-none py-1">
  <input type="radio" name="rs3" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative flex items-center justify-center shrink-0 size-7 border-2 border-base-300 rounded-full peer-checked:border-primary">
    <span class="size-4 rounded-full bg-primary scale-0 peer-checked:scale-100 transition-transform"></span>
  </span>
  <span class="text-base">Large</span>
</label>

Requires: tw.min.css

// No JavaScript required — pure CSS component

Radio Cards

Starter

Perfect for small projects and prototypes.

Professional

Best for growing teams and businesses.

Enterprise

Advanced features for large organizations.

<div class="radio-card-group">
  <div class="radio-card radio-card-selected">
    <span class="radio-card-check">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
    </span>
    <div class="radio-card-title">Starter</div>
    <div class="radio-card-description">Perfect for small projects and prototypes.</div>
  </div>
  <div class="radio-card">
    <span class="radio-card-check">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
    </span>
    <div class="radio-card-title">Professional</div>
    <div class="radio-card-description">Best for growing teams and businesses.</div>
  </div>
  <div class="radio-card">
    <span class="radio-card-check">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
    </span>
    <div class="radio-card-title">Enterprise</div>
    <div class="radio-card-description">Advanced features for large organizations.</div>
  </div>
</div>

Requires: ux.min.css

<div class="grid gap-3" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
  <div class="relative p-4 rounded-box border-2 border-primary cursor-pointer" style="background-color: color-mix(in oklch, var(--color-primary) 5%, var(--color-base-100));">
    <span class="absolute top-3 right-3 flex items-center justify-center size-6 rounded-full bg-primary text-primary-content">
      <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
    </span>
    <div class="text-base font-medium mb-1">Starter</div>
    <div class="text-sm text-base-content/60">Perfect for small projects and prototypes.</div>
  </div>
  <div class="relative p-4 bg-base-100 rounded-box border-2 border-base-300 cursor-pointer hover:border-primary transition-colors">
    <span class="absolute top-3 right-3 flex items-center justify-center size-6 rounded-full bg-primary text-primary-content opacity-0 scale-0">
      <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
    </span>
    <div class="text-base font-medium mb-1">Professional</div>
    <div class="text-sm text-base-content/60">Best for growing teams and businesses.</div>
  </div>
  <div class="relative p-4 bg-base-100 rounded-box border-2 border-base-300 cursor-pointer hover:border-primary transition-colors">
    <span class="absolute top-3 right-3 flex items-center justify-center size-6 rounded-full bg-primary text-primary-content opacity-0 scale-0">
      <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
    </span>
    <div class="text-base font-medium mb-1">Enterprise</div>
    <div class="text-sm text-base-content/60">Advanced features for large organizations.</div>
  </div>
</div>

Requires: tw.min.css

// Radio cards need JS to toggle selection:
document.querySelectorAll('.radio-card').forEach(card => {
  card.addEventListener('click', () => {
    card.closest('.radio-card-group')
      .querySelectorAll('.radio-card')
      .forEach(c => c.classList.remove('radio-card-selected'));
    card.classList.add('radio-card-selected');
  });
});

Toggle

iOS-style toggle switches for on/off settings.

Toggle Basics

Notifications Dark mode Disabled

<label class="toggle">
  <input type="checkbox" checked />
  <span class="toggle-track">
    <span class="toggle-thumb"></span>
  </span>
  <span class="toggle-label">Notifications</span>
</label>

<label class="toggle">
  <input type="checkbox" />
  <span class="toggle-track">
    <span class="toggle-thumb"></span>
  </span>
  <span class="toggle-label">Dark mode</span>
</label>

<label class="toggle toggle-disabled">
  <input type="checkbox" disabled />
  <span class="toggle-track">
    <span class="toggle-thumb"></span>
  </span>
  <span class="toggle-label">Disabled</span>
</label>

Requires: ux.min.css

<label class="inline-flex items-center gap-3 cursor-pointer select-none">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative shrink-0 w-[51px] h-[31px] bg-base-300 rounded-full peer-checked:bg-primary transition-colors">
    <span class="absolute top-0.5 left-0.5 size-[27px] bg-white rounded-full shadow-md peer-checked:translate-x-5 transition-transform"></span>
  </span>
  <span class="text-base">Notifications</span>
</label>

<label class="inline-flex items-center gap-3 cursor-pointer select-none">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" />
  <span class="relative shrink-0 w-[51px] h-[31px] bg-base-300 rounded-full peer-checked:bg-primary transition-colors">
    <span class="absolute top-0.5 left-0.5 size-[27px] bg-white rounded-full shadow-md peer-checked:translate-x-5 transition-transform"></span>
  </span>
  <span class="text-base">Dark mode</span>
</label>

<label class="inline-flex items-center gap-3 cursor-pointer select-none opacity-50 pointer-events-none">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" disabled />
  <span class="relative shrink-0 w-[51px] h-[31px] bg-base-300 rounded-full">
    <span class="absolute top-0.5 left-0.5 size-[27px] bg-white rounded-full"></span>
  </span>
  <span class="text-base">Disabled</span>
</label>

Requires: tw.min.css

// No JavaScript required — use native <input type="checkbox">
// The toggle is a styled checkbox with CSS transitions.

Toggle Colors

Primary Success Warning Error

<label class="toggle color-primary">
  <input type="checkbox" checked />
  <span class="toggle-track"><span class="toggle-thumb"></span></span>
  <span class="toggle-label">Primary</span>
</label>
<label class="toggle color-success">
  <input type="checkbox" checked />
  <span class="toggle-track"><span class="toggle-thumb"></span></span>
  <span class="toggle-label">Success</span>
</label>
<label class="toggle color-warning">
  <input type="checkbox" checked />
  <span class="toggle-track"><span class="toggle-thumb"></span></span>
  <span class="toggle-label">Warning</span>
</label>
<label class="toggle color-error">
  <input type="checkbox" checked />
  <span class="toggle-track"><span class="toggle-thumb"></span></span>
  <span class="toggle-label">Error</span>
</label>

Requires: ux.min.css

<label class="inline-flex items-center gap-3 cursor-pointer select-none">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative shrink-0 w-[51px] h-[31px] bg-base-300 rounded-full peer-checked:bg-primary transition-colors">
    <span class="absolute top-0.5 left-0.5 size-[27px] bg-white rounded-full shadow-md peer-checked:translate-x-5 transition-transform"></span>
  </span>
  <span class="text-base">Primary</span>
</label>
<label class="inline-flex items-center gap-3 cursor-pointer select-none">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative shrink-0 w-[51px] h-[31px] bg-base-300 rounded-full peer-checked:bg-success transition-colors">
    <span class="absolute top-0.5 left-0.5 size-[27px] bg-white rounded-full shadow-md peer-checked:translate-x-5 transition-transform"></span>
  </span>
  <span class="text-base">Success</span>
</label>
<label class="inline-flex items-center gap-3 cursor-pointer select-none">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative shrink-0 w-[51px] h-[31px] bg-base-300 rounded-full peer-checked:bg-warning transition-colors">
    <span class="absolute top-0.5 left-0.5 size-[27px] bg-white rounded-full shadow-md peer-checked:translate-x-5 transition-transform"></span>
  </span>
  <span class="text-base">Warning</span>
</label>
<label class="inline-flex items-center gap-3 cursor-pointer select-none">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative shrink-0 w-[51px] h-[31px] bg-base-300 rounded-full peer-checked:bg-error transition-colors">
    <span class="absolute top-0.5 left-0.5 size-[27px] bg-white rounded-full shadow-md peer-checked:translate-x-5 transition-transform"></span>
  </span>
  <span class="text-base">Error</span>
</label>

Requires: tw.min.css

// No JavaScript required — pure CSS component

Toggle Sizes

Small Default Large

<label class="toggle toggle-sm">
  <input type="checkbox" checked />
  <span class="toggle-track"><span class="toggle-thumb"></span></span>
  <span class="toggle-label">Small</span>
</label>
<label class="toggle">
  <input type="checkbox" checked />
  <span class="toggle-track"><span class="toggle-thumb"></span></span>
  <span class="toggle-label">Default</span>
</label>
<label class="toggle toggle-lg">
  <input type="checkbox" checked />
  <span class="toggle-track"><span class="toggle-thumb"></span></span>
  <span class="toggle-label">Large</span>
</label>

Requires: ux.min.css

<label class="inline-flex items-center gap-3 cursor-pointer select-none">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative shrink-0 w-10 h-6 bg-base-300 rounded-full peer-checked:bg-primary transition-colors">
    <span class="absolute top-0.5 left-0.5 size-5 bg-white rounded-full shadow-md peer-checked:translate-x-4 transition-transform"></span>
  </span>
  <span class="text-base">Small</span>
</label>
<label class="inline-flex items-center gap-3 cursor-pointer select-none">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative shrink-0 w-[51px] h-[31px] bg-base-300 rounded-full peer-checked:bg-primary transition-colors">
    <span class="absolute top-0.5 left-0.5 size-[27px] bg-white rounded-full shadow-md peer-checked:translate-x-5 transition-transform"></span>
  </span>
  <span class="text-base">Default</span>
</label>
<label class="inline-flex items-center gap-3 cursor-pointer select-none">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative shrink-0 w-16 h-[38px] bg-base-300 rounded-full peer-checked:bg-primary transition-colors">
    <span class="absolute top-0.5 left-0.5 size-[34px] bg-white rounded-full shadow-md peer-checked:translate-x-[26px] transition-transform"></span>
  </span>
  <span class="text-base">Large</span>
</label>

Requires: tw.min.css

// No JavaScript required — pure CSS component

Toggle with Label Left

Wi-Fi Bluetooth

<label class="toggle">
  <input type="checkbox" checked />
  <span class="toggle-track"><span class="toggle-thumb"></span></span>
  <span class="toggle-label toggle-label-left">Wi-Fi</span>
</label>
<label class="toggle">
  <input type="checkbox" />
  <span class="toggle-track"><span class="toggle-thumb"></span></span>
  <span class="toggle-label toggle-label-left">Bluetooth</span>
</label>

Requires: ux.min.css

<label class="inline-flex items-center gap-3 cursor-pointer select-none flex-row-reverse">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" checked />
  <span class="relative shrink-0 w-[51px] h-[31px] bg-base-300 rounded-full peer-checked:bg-primary transition-colors">
    <span class="absolute top-0.5 left-0.5 size-[27px] bg-white rounded-full shadow-md peer-checked:translate-x-5 transition-transform"></span>
  </span>
  <span class="text-base">Wi-Fi</span>
</label>
<label class="inline-flex items-center gap-3 cursor-pointer select-none flex-row-reverse">
  <input type="checkbox" class="absolute opacity-0 w-0 h-0 peer" />
  <span class="relative shrink-0 w-[51px] h-[31px] bg-base-300 rounded-full peer-checked:bg-primary transition-colors">
    <span class="absolute top-0.5 left-0.5 size-[27px] bg-white rounded-full shadow-md peer-checked:translate-x-5 transition-transform"></span>
  </span>
  <span class="text-base">Bluetooth</span>
</label>

Requires: tw.min.css

// No JavaScript required — pure CSS component

Reference

Checkbox Classes

Class	Description
.checkbox	Base wrapper (label element)
.checkbox-input	Hidden native input
.checkbox-box	Visual check box
.checkbox-mark	Checkmark SVG icon
.checkbox-label	Text label
.checkbox-description	Secondary description text
.checkbox-sm	Small size (1.125rem box)
.checkbox-lg	Large size (1.75rem box)
.checkbox-round	Circular checkbox
.checkbox-disabled	Disabled state
.checkbox-group	Vertical group container
.checkbox-group-horizontal	Horizontal group
.color-*	Color composition (primary, success, warning, error, etc.)

Radio Classes

Class	Description
.radio	Base wrapper (label element)
.radio-input	Hidden native input
.radio-circle	Visual circle
.radio-dot	Inner fill dot
.radio-label	Text label
.radio-description	Secondary description text
.radio-sm	Small size
.radio-lg	Large size
.radio-disabled	Disabled state
.radio-group	Vertical group container
.radio-group-horizontal	Horizontal group
.radio-card	Selectable card variant
.radio-card-selected	Selected card state
.radio-card-group	Auto-fit grid for radio cards
.color-*	Color composition (primary, success, warning, error, etc.)

Toggle Classes

Class	Description
.toggle	Base wrapper (label element)
.toggle-track	Sliding track background
.toggle-thumb	Sliding knob
.toggle-label	Text label
.toggle-label-left	Place label before toggle
.toggle-description	Secondary description text
.toggle-sm	Small size (40×24px)
.toggle-lg	Large size (64×38px)
.toggle-disabled	Disabled state
.toggle-icon	Icon inside track
.color-*	Color composition (primary, success, warning, error, etc.)