# Checkbox and radio button

> A checkbox lets people select any number of options, and a radio button lets them select exactly one. Material 3 has both on Android, while iOS uses a toggle or a list row with a checkmark instead.

Page: https://www.appetiteui.com/glossary/checkbox-radio-button. Checkbox vs radio button vs toggle on iOS and Android. Also called Checkbox, Radio button, Radio group.

## Why it matters

Choosing the wrong control confuses the result of a tap: a checkbox can be turned off, a radio button cannot, and a toggle applies at once. The wrong one costs a support question or a failed form.

Since iOS has no checkbox, a shared design for both platforms has to decide what each one shows.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | No checkbox: Toggle, or a list row with a checkmark | Checkbox and Radio button | Checkbox and Radio |
| Checkbox in the file | None in the file | M3 Checkbox, 48 by 48 | See below |
| Radio in the file | None in the file | M3 Radio, 48 by 48 | See below |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |

## In Appetite UI

Appetite UI draws a Checkbox as a 24 box at radius 8 in a 44 target and a Radio as a 22 disc in a 44 target. It adds Focused and Error to the Checkbox and Pressed and Focused to the Radio, which the Material 3 set does not have.

## Example

A filter screen lets people tick several cuisines with checkboxes, and choose one sort order with radio buttons. On iOS the sort order becomes a list of rows with a checkmark on the chosen one.

## Common mistakes

- Using a checkbox for a setting that applies at once. Use a toggle.
- Using radio buttons for a choice that can be empty. Offer a None option.
- Drawing the box at the size of its target. Keep the touch target at the platform minimum.
- Labelling only the box. Make the whole row tappable.

## Questions

### What is the difference between a checkbox and a toggle?

A toggle applies a setting immediately and is on or off; a checkbox marks an option that takes effect when the form is submitted, and several can be set. iOS has the toggle only.

### Does iOS have a checkbox?

Not as a control. Apple’s guidance is a Toggle for one setting, and a list row with a checkmark for a choice among several.

## Sources

1. [Apple Human Interface Guidelines: Toggles](https://developer.apple.com/design/human-interface-guidelines/toggles)
2. [Material Design 3: Checkbox](https://m3.material.io/components/checkbox/overview)
3. [Material Components for Android: Checkbox](https://github.com/material-components/material-components-android/blob/master/docs/components/Checkbox.md)
4. [Material Components for Android: Radio button](https://github.com/material-components/material-components-android/blob/master/docs/components/RadioButton.md)

## Related

- Docs: [Checkbox](https://www.appetiteui.com/docs/checkbox)
- Docs: [Radio](https://www.appetiteui.com/docs/radio)
- Docs: [Toggle](https://www.appetiteui.com/docs/toggle)
- Article: [Touch target size on iOS and Android: 44 pt, 48 dp and the WCAG minimum](https://www.appetiteui.com/blog/touch-target-size-ios-android)
- Glossary: [Toggle and switch](https://www.appetiteui.com/glossary/toggle-switch)
- Glossary: [Touch target](https://www.appetiteui.com/glossary/touch-target)
- Glossary: [Segmented control](https://www.appetiteui.com/glossary/segmented-control)