# rn-checkbox-list

> List of checkboxes with select and deselect all option

Latest version **1.3.0** (published 2026-01-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install rn-checkbox-list
pnpm add rn-checkbox-list
yarn add rn-checkbox-list
bun add rn-checkbox-list
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2026-01-23 |
| First published | 2020-01-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Rinku |
| Maintainers | rinkuk1993, sameer-j |
| Keywords | checkbox, checkboxes, react-native, checkbox-list, checklist, android, ios |

## Links

- npm: https://www.npmjs.com/package/rn-checkbox-list
- Repository: https://github.com/rinku-k/rn-checkbox-list
- Homepage: https://github.com/rinku-k/rn-checkbox-list#readme
- Issues: https://github.com/rinku-k/rn-checkbox-list/issues
- npm.io page: https://npm.io/package/rn-checkbox-list

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2026-01-23
- 1.2.0 — 2022-12-02
- 1.1.0 — 2021-10-25
- 1.0.0 — 2021-09-19
- 0.4.0 — 2021-01-15
- 0.3.1 — 2021-01-15
- 0.3.0 — 2020-09-07
- 0.2.0 — 2020-06-22
- 0.1.2 — 2020-06-08
- 0.1.1 — 2020-06-08
- 0.1.0 — 2020-06-08
- 0.0.9 — 2020-01-17
- 0.0.8 — 2020-01-17
- 0.0.7 — 2020-01-17
- 0.0.6 — 2020-01-16
- … 4 more at https://npm.io/package/rn-checkbox-list/versions

## README

# rn-checkbox-list

![npm version](https://badge.fury.io/js/rn-checkbox-list.svg)
[![CodeFactor](https://www.codefactor.io/repository/github/rinku-k/rn-checkbox-list/badge)](https://www.codefactor.io/repository/github/rinku-k/rn-checkbox-list)
[![Coverage Status](https://coveralls.io/repos/github/rinku-k/rn-checkbox-list/badge.svg?branch=master)](https://coveralls.io/github/rinku-k/rn-checkbox-list?branch=master)
[![Codacy Badge](https://app.codacy.com/project/badge/Grade/1e95eb5c852c4b3f886b70ece11aedba)](https://www.codacy.com/gh/rinku-k/rn-checkbox-list/dashboard?utm_source=github.com&utm_medium=referral&utm_content=rinku-k/rn-checkbox-list&utm_campaign=Badge_Grade)

The goal of `rn-checkbox-list` is to achieve the checkbox list with minimal effort and easy customisation.

<p align="center">
  <img src="/.github/demo.gif" height="500" align="left" />
  <img src="/.github/ios.gif" height="500" />
  <img src="/.github/custom_render_component.jpg" height="500" align="right">
</p>

<details>
  <summary>Android screenshots</summary>

  <p align="center">
    <img src="/.github/initial.jpeg" height="500" />
    <img src="/.github/single_select.jpeg" height="500" />
    <img src="/.github/select_all.jpeg" height="500" />
    <img src="/.github/loader.jpeg" height="500" />
  </p>
</details>

<details>
  <summary>iOS screenshots</summary>

  <p align="center">
    <img src="/.github/ios_select.png" height="500" />
    <img src="/.github/ios_select_purple.png" height="500" />
  </p>
</details>

## Support

| rn-checkbox-list version | Platform              | RN Version |
| ------------------------ | --------------------- | ---------- |
| >= 1.0.0                 | Android, iOS, Windows | >=0.62.3   |
| > 0.3                    | Android, iOS, Windows | 0.61.5     |
| <=0.2                    | Android               | 0.61.5     |

## Setup

This library is available on [npm](https://www.npmjs.com/package/rn-checkbox-list), install it with:
`npm i @react-native-community/checkbox rn-checkbox-list`
or
`yarn add @react-native-community/checkbox rn-checkbox-list`

and then run `npx pod-install`
## Usage

1.  Import rn-checkbox-list:

```javascript
import CheckboxList from 'rn-checkbox-list';
```

2.  Create data with id and name:

```javascript
[{ id: 1, name: 'Green Book' }, { id: 2, name: 'Bohemian Rhapsody' }];
```

3.  Add data to imported component

```javascript
<CheckboxList headerName="This is header name" listItems={data} />
```

## Sample example

```javascript
<CheckboxList
  headerName="Movies"
  theme="red"
  listItems={data}
  onChange={({ ids, items }) => console.log('My updated list :: ', ids)}
  listItemStyle={{ borderBottomColor: '#eee', borderBottomWidth: 1 }}
  checkboxProp={{ boxType: 'square' }} // iOS (supported from v0.3.0)
  onLoading={() => <LoaderComponent />}
/>
```

Check for complete example [here](https://github.com/rinku-k/rn-checkbox-list/blob/master/example/index.js).

## Available props

| Name              | Type         | Default                                                                                                                                             | Description                                           |
| ----------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
| listItems         | object array | []                                                                                                                                                  | List of checkboxes                                    |
| selectedListItems | object array | []                                                                                                                                                  | List of selected items(subset of `listItems`)         |
| headerName        | string       | ''                                                                                                                                                  | Shows header with the given name                      |
| listItemStyle     | object       | {}                                                                                                                                                  | Each check list style                                 |
| checkboxProp      | object       | {}                                                                                                                                                  | Custom checkbox style                                 |
| headerStyle       | object       | [See here](https://github.com/rinku-k/rn-checkbox-list/wiki/Props-Details#headerstyle) | Header check list style                               |
| onChange          | function     | null                                                                                                                                                | Fires on each checkbox select or deselect             |
| onLoading         | function     | null                                                                                                                                                | When the list is empty and a loader needs to be shown |
| theme             | string       | #1A237E                                                                                                                                             | Custom theme color for checkbox                       |
|**v1.1.0 & above**|||
| renderItem        | function     | Text Component                                                                                                                                      | Custom render component for each list item            |

**Refer [wiki](https://github.com/rinku-k/rn-checkbox-list/wiki/Props-Details) for detailed usecases of the props**

## Improvements

- [x] Importing checkbox through updated react-native package (removing warnings)
- [x] Customisable checkbox colors
- [x] Provide selected items and selected ids
- [x] Support for default selected items
- [x] Support iOS

Pull requests, feedbacks and suggestions are welcome!

---
_Source: https://npm.io/package/rn-checkbox-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._