##### Recently Browses

- Apps Api
- Dashboard Marketing

##### Memebers

- Ethan Smith Backend Developer
- Isabella Garcia Digital Marketer
- Noah Walker Full Stack Developer

##### Filters

- customers:
  All customers list
- products:
  Bestselling products
- events:
  All upcoming events

## Radio & checkbox

1. Home
3. Forms
5. Radio & checkbox

##### Checkbox

Checked
With label
Disabled
Custom Color

    <input type="checkbox" class="input-checkbox" placeholder="Input Default">

    <label for="checkedLabel" class="inline-flex items-center gap-2">
        <input checked type="checkbox" class="input-checkbox" id="checkedLabel" name="inputCheckbox">
        <span>Checked</span>
    </label>

    <label for="checkLabel" class="inline-flex items-center gap-2">
        <input type="checkbox" class="input-checkbox" id="checkLabel" name="inputCheckbox">
        <span>With label</span>
    </label>

    <label for="checkDisabled" class="inline-flex pointer-events-none opacity-60 items-center gap-2">
        <input disabled type="checkbox" class="input-checkbox" id="checkDisabled" name="inputCheckbox">
        <span>Disabled</span>
    </label>

    <!--Custom Color-->
    <input type="checkbox" name="customCCheckbox" class="input-checkbox hover:!ring-yellow-500/20 hover:!border-yellow-500 checked:!ring-transparent checked:!bg-yellow-500 checked:!border-yellow-500">
    <input type="checkbox" name="customCCheckbox" class="input-checkbox hover:!ring-zinc-500/20 hover:!border-zinc-500 checked:!ring-transparent checked:!bg-zinc-500 checked:!border-zinc-500">

##### Radio

Checked
With label
Disabled
Custom Color

    <input type="radio" class="input-radio" name="inputRadio">

    <label for="radioChecked" class="inline-flex items-center gap-2">
        <input checked type="radio" class="input-radio" id="radioChecked" name="inputRadio">
        <span>Checked</span>
    </label>

    <label for="radioLabel" class="inline-flex items-center gap-2">
        <input type="radio" class="input-radio" id="radioLabel" name="inputRadio">
        <span>With label</span>
    </label>

    <label for="radioDisabled" class="inline-flex pointer-events-none opacity-60 items-center gap-2">
        <input disabled type="radio" class="input-radio" id="radioDisabled" name="inputRadio">
        <span>Disabled</span>
    </label>

    <!--Custom Color-->
    <input type="radio" name="customCRadio" class="input-radio hover:!ring-yellow-500/20 hover:!border-yellow-500 checked:!ring-transparent checked:!bg-yellow-500 checked:!border-yellow-500">
    <input type="radio" name="customCRadio" class="input-radio hover:!ring-zinc-500/20 hover:!border-zinc-500 checked:!ring-transparent checked:!bg-zinc-500 checked:!border-zinc-500">

##### Switch Checkbox

Checked
With label
Disabled
Custom Color

    <input type="checkbox" class="input-switch">

    <label for="switchChecked" class="inline-flex items-center gap-2">
        <input checked type="checkbox" class="input-switch" id="switchChecked">
        <span>Checked</span>
    </label>

    <label for="switchLabel" class="inline-flex items-center gap-2">
        <input type="checkbox" class="input-switch" id="switchLabel">
        <span>With label</span>
    </label>

    <label for="switchDisabled" class="inline-flex pointer-events-none opacity-60 items-center gap-2">
        <input disabled type="checkbox" class="input-switch" id="switchDisabled">
        <span>Disabled</span>
    </label>

    <!--Custom Color-->
    <input type="checkbox" class="input-switch after:!bg-yellow-500 checked:!bg-yellow-500 checked:after:!bg-white">
    <input type="checkbox" class="input-switch after:!bg-zinc-500 checked:!bg-zinc-500 checked:after:!bg-white">

##### Advanced

Change utility to make it Radio or Checkbox News & updates Excepteur sint occaecat cupidatat non proident

    <label for="cUpdates" class="flex cursor-pointer items-center gap-3.5">
        <input type="checkbox" id="cUpdates" class="input-switch">
        <span class="flex-grow flex flex-col leading-tight">
            <span class="text-lg font-semibold mb-0">News & updates</span>
            <span class="text-sm">Excepteur sint occaecat cupidatat non proident</span>
        </span>
    </label>

### Plan A

$9/month

Basic features for individuals getting started.

### Plan B

$29/month

Team plan for small businesses.

    <!-- Plan A -->
    <div class="relative p-4 rounded-lg flex items-center gap-3.5">
        <input type="radio" name="plan" id="planA" class="peer input-radio" checked>
        <label for="planA" class="absolute inset-0 w-full h-full border border-zinc-200 dark:border-zinc-700 rounded-lg p-4 cursor-pointer peer-checked:border-primary peer-checked:ring-1 peer-checked:ring-primary transition-all"></label>
        <div>
            <h3 class="text-lg">Plan A</h3>
            <p class="text-xl font-semibold mb-1">$9/month</p>
            <p class="text-zinc-400">Basic features for individuals getting started.</p>
        </div>
    </div>
    <!-- Plan A -->
    <div class="relative p-4 rounded-lg flex items-center gap-3.5">
        <input type="radio" name="plan" id="planB" class="peer input-radio">
        <label for="planB" class="absolute inset-0 w-full h-full border border-zinc-200 dark:border-zinc-700 rounded-lg p-4 cursor-pointer peer-checked:border-primary peer-checked:ring-1 peer-checked:ring-primary transition-all"></label>
        <div>
            <h3 class="text-lg">Plan B</h3>
            <p class="text-xl font-semibold mb-1">$29/month</p>
            <p class="text-zinc-400">Team plan for small businesses.</p>
        </div>
    </div>