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

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Usage from "../component_usage/CheckBox.mdx";
import Play from "@site/playground/CheckBox/checkbox.playground";

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.

## Import

```tsx
import { CheckBox } from "@rneui/themed";
```

## Usage

<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` or `ReactElement<{}, string` or `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 />
