Checkbox & Radio

Checkbox

There's one type of checkbox in Material. Use this selection control when the user needs to select one or more options from a list.

                
<!-- checked -->
<label class="flex items-center gap-3">
  <input type="checkbox" name="checked-demo" class="w-[18px] h-[18px] flex-none accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 dark:hover:accent-primary-200 rounded-[2px]" checked>
  <span>Checkbox</span>
</label>

<!-- default -->
<label class="flex items-center gap-3">
  <input type="checkbox" name="checked-demo" class="w-[18px] h-[18px] flex-none accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 dark:hover:accent-primary-200 rounded-[2px]">
  <span>Checkbox</span>
</label>

<!-- disabled -->
<label class="flex items-center gap-3">
  <input type="checkbox" name="checked-demo" class="w-[18px] h-[18px] flex-none accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 dark:hover:accent-primary-200 rounded-[2px]" disabled checked>
  <span>Disabled</span>
</label>

Radio

Radio buttons are a selection control that often appears when users are asked to make decisions or select a choice from options. Radio buttons are the recommended way to allow users to make a single selection from a list of options.

                
<!-- checked -->
<label class="flex items-center gap-3">
  <input class="w-[18px] h-[18px] flex-none accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 dark:hover:accent-primary-200 rounded-[2px]" name="radio" type="radio" value="female" checked>
  Female
</label>

<!-- default -->
<label class="flex items-center gap-3">
  <input class="w-[18px] h-[18px] flex-none accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 dark:hover:accent-primary-200 rounded-[2px]" name="radio" type="radio" value="male">
  Male
</label>

<!-- disabled -->
<label class="flex items-center gap-3">
  <input class="w-[18px] h-[18px] flex-none accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 dark:hover:accent-primary-200 rounded-[2px]" name="radio" type="radio" value="none" disabled>
  Disabled
</label>