# 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.

Checkbox
Checkbox
Disabled

    <!-- 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.

Female
Male
Disabled

    <!-- 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>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts