English Espanol Japanese
Notifications
Critical alert: Server crash detected
Just now
Emiliya mentioned in you a comment
1h
Backup completed successfully
2h
Profile updated successfully
3h
Nikita sent you a friend request
Accept
2d
API updated
3d
View All
Theme
Sidebar

Radio & checkbox

  1. Home
  3. Forms
  5. Radio & checkbox
Checkbox




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-stone-500/20 hover:!border-stone-500 checked:!ring-transparent checked:!bg-stone-500 checked:!border-stone-500">
Radio




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-stone-500/20 hover:!border-stone-500 checked:!ring-transparent checked:!bg-stone-500 checked:!border-stone-500">
Switch Checkbox




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-stone-500 checked:!bg-stone-500 checked:after:!bg-white">
Advanced
Change utility to make it Radio or Checkbox 

<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-medium 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-stone-200 dark:border-stone-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-medium mb-1">$9/month</p>
        <p class="text-stone-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-stone-200 dark:border-stone-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-medium mb-1">$29/month</p>
        <p class="text-stone-400">Team plan for small businesses.</p>
    </div>
</div>