---
id: checkbox
title: CheckBox
---

import { IconsStyle } from "@site/src/components/Docs_Icons";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";
import { BiInfoCircle } from "react-icons/bi";
import Usage from "../component_usage/CheckBox.mdx";
import Play from "@site/playground/CheckBox/checkbox.playground";

<IconsStyle />

CheckBoxes allow users to complete tasks that involve making choices such as selecting options, or switching settings - On or Off. It provides a clear visual of either a true or false choice.

## Usage

<div class="row inline-flex-center">
  <div class="col col--3">
    <h4>Import</h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`import { CheckBox } from '@rneui/themed';`}</CodeBlock>
  </div>
  <div class="col col--3">
    <h4>
      Theme Key{" "}
      <a href="../customizing#using-themeprovider">
        <BiInfoCircle />
      </a>
    </h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`CheckBox`}</CodeBlock>
  </div>
</div>

### Simple

```tsx live
function () {
     const [checked, setChecked] = React.useState(true);
     const toggleCheckbox = () => setChecked(!checked);
     return (
       <Stack row align="center" spacing={1}>
         <CheckBox
           checked={checked}
           onPress={toggleCheckbox}
           // Use ThemeProvider to make change for all checkbox
           iconType="material-community"
           checkedIcon="checkbox-marked"
           uncheckedIcon="checkbox-blank-outline"
           checkedColor="red"
         />
         <CheckBox
           checked={checked}
           onPress={toggleCheckbox}
           iconType="material-community"
           checkedIcon="checkbox-outline"
           uncheckedIcon={'checkbox-blank-outline'}
         />
         <CheckBox
           checked={false}
           disabled
           iconType="material-community"
           checkedIcon="checkbox-outline"
           uncheckedIcon={'checkbox-blank-outline'}
         />
       </Stack>
     );
   }
```

### Label

```tsx live
<Stack row align="center" spacing={4}>
  <CheckBox checked title="Label" />
  <CheckBox checked disabled title="Label" />
</Stack>
```

### Radio

```tsx live
function () {
     const [selectedIndex, setIndex] = React.useState(0);

     return (
       <Stack row align="center" spacing={4}>
         <CheckBox
           checked={selectedIndex === 0}
           onPress={() => setIndex(0)}
           checkedIcon="dot-circle-o"
           uncheckedIcon="circle-o"
         />
         <CheckBox
           checked={selectedIndex === 1}
           onPress={() => setIndex(1)}
           checkedIcon="dot-circle-o"
           uncheckedIcon="circle-o"
         />
       </Stack>
     );
   }
```

### Size

```tsx live
<Stack row align="center" spacing={4}>
  <CheckBox checked size={18} />
  <CheckBox checked size={24} />
  <CheckBox checked size={32} />
</Stack>
```

### Custom icon

```tsx live
function () {
     const [checked, setState] = React.useState(true);
     const toggleCheckbox = () => setState(!checked);
     return (
       <Stack row align="center">
         <CheckBox
           checked={checked}
           checkedIcon="heart"
           uncheckedIcon="heart-o"
           checkedColor="red"
           onPress={toggleCheckbox}
         />
         <CheckBox
           checked={checked}
           checkedIcon="bookmark"
           uncheckedIcon="bookmark-o"
           checkedColor="heart"
           onPress={toggleCheckbox}
         />
       </Stack>
     );
   }
```

<Usage />

## Props

:::note
Includes all [CheckBoxIcon](checkboxicon#props), [View](https://reactnative.dev/docs/view#props) props.
:::

<div class='table-responsive'>

| Name                 | Type                                                                   | Default | Description                                     |
| -------------------- | ---------------------------------------------------------------------- | ------- | ----------------------------------------------- |
| `Component`          | React Component                                                        |         | Specify React Native component for main button. |
| `center`             | boolean                                                                | `false` | Aligns checkbox to center.                      |
| `checkedTitle`       | string                                                                 |         | Specify a custom checked message.               |
| `containerStyle`     | View Style                                                             |         | Style of main container.                        |
| `disabled`           | boolean                                                                | `false` | Disables user interaction.                      |
| `disabledStyle`      | View Style                                                             |         | Style of the checkbox container when disabled.  |
| `disabledTitleStyle` | Text Style                                                             |         | Style of the title when disabled.               |
| `fontFamily`         | string                                                                 |         | Specify different font family.                  |
| `iconRight`          | boolean                                                                | `false` | Moves icon to right of text.                    |
| `right`              | boolean                                                                | `false` | Aligns checkbox to right.                       |
| `textStyle`          | Text Style                                                             |         | Style of text.                                  |
| `title`              | `string` \| `ReactElement<{}, string` \| `JSXElementConstructor<any>>` |         | Title of checkbox.                              |
| `titleProps`         | TextProps                                                              | `{}`    | Additional props for the title Text component.  |
| `wrapperStyle`       | View Style                                                             |         | Style for the wrapper of checkbox.              |

</div>

## Playground

<Play />
