# @nice-digital/nds-checkbox

> Checkbox component for the NICE Design System

Latest version **4.1.0** (published 2026-02-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nice-digital/nds-checkbox
pnpm add @nice-digital/nds-checkbox
yarn add @nice-digital/nds-checkbox
bun add @nice-digital/nds-checkbox
```

## Health

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

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

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 4.1.0 |
| Published | 2026-02-05 |
| First published | 2019-09-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 11.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Warren Keith |
| Maintainers | martingallagher1980, ditprogrammatic, josealmeida, mark-nice, nansenst, colin.mazurkiewicz, imranazad, dalenice, johndavey72, aboutabecca, johnholland-nice, tresa_k, shilpaunni, tinaday, staceyjones43 |

## Links

- npm: https://www.npmjs.com/package/@nice-digital/nds-checkbox
- Repository: https://github.com/nice-digital/nice-design-system
- Homepage: https://design-system.nice.org.uk/
- Issues: https://github.com/nice-digital/nice-design-system/issues
- npm.io page: https://npm.io/package/@nice-digital/nds-checkbox

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@nice-digital/nds-core](https://npm.io/package/@nice-digital/nds-core.md) ^4.1.0

## Recent versions

- 4.1.0 (latest) — 2026-02-05
- 4.0.18-alpha.0 (alpha) — 2026-02-03
- 4.0.17-alpha-node-update.0 — 2025-11-20
- 4.0.16 — 2025-10-24
- 4.0.15 — 2025-09-29
- 4.0.15-alpha.27 — 2025-09-29
- 4.0.14 — 2024-09-17
- 4.0.14-alpha.0 — 2024-08-30
- 4.0.13 — 2024-08-14
- 4.0.13-alpha.0 — 2024-08-14
- 4.1.2-alpha.0 — 2024-08-08
- 4.1.1-alpha.0 — 2024-07-22
- 4.1.0-alpha.0 — 2024-07-16
- 4.0.12 — 2024-03-01
- 4.0.11 — 2024-02-28
- … 73 more at https://npm.io/package/@nice-digital/nds-checkbox/versions

## README

# `@nice-digital/nds-checkbox`

> Checkbox component for the NICE Design System

- [`@nice-digital/nds-checkbox`](#nice-digitalcheckbox) - [Installation](#installation) - [Usage](#usage) - [React](#react) - [Props](#props) - [SCSS](#scss) - [HTML](#html)

## Installation

Install Node, and then:

```sh
npm i @nice-digital/nds-checkbox --save
```

## Usage

### React

Import the `Checkbox` component from the package and use within JSX:

```jsx
import React from "react";
import { Checkbox } from "@nice-digital/nds-checkbox";

// The mimimum to be supplied for the input to render is a value and a name

<Checkbox value="yes" name="contact-permission" />;
```

> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

#### Props

##### value

- Type: `string` (required)

The value for the single input.

```js
<Checkbox value="yes" name="contact-permission" />
```

##### name

- Type: `string` (required)

The name attribute on the single input

```js
<Checkbox label="yes" name="contact-permission" />
```

##### label

- Type: `string`

The label for the single input.

```js
<Checkbox label="yes" name="contact-permission" label="Yes, please." />
```

##### hint

- Type: `string`

Any hint or help text that should be rendered underneath the checkbox and label

```js
<Checkbox
	label="yes"
	name="contact-permission"
	label="Yes, please."
	hint="You can unsubscribe at any time"
/>
```

##### disabled

- Type: `boolean`

Prop to control whether the disabled attribute is present on the input.

```js
<Checkbox label="yes" name="contact-permission" disabled={true} />
```

##### error

- Type: `string` | `boolean`

Prop to control whether an error class (and styling) is applied to the input, label and container. If `true` is supplied then the error styling is applied, if a `string` is supplied, the error styling is applied and an error message is rendered.

```js
<Checkbox label="yes" name="contact-permission" error={true} />
<Checkbox label="yes" name="contact-permission" error="Please check the terms and conditions" />
```

##### hint

- Type: `string`

Add hint text underneath the label

```js
<Checkbox
	label="yes"
	name="contact-permission"
	hint="You can unsubscribe at any time."
/>
```

##### inline

- Type: `boolean`

Prop to control whether the container recieves a class to set it visually inline. All checkboxes in the group would need this prop.

```js
<div>
	<Checkbox label="yes" name="contact-permission" inline={true} />
	<Checkbox label="no" name="contact-permission" inline={true} />
</div>
```

##### anything else

You can pass any other props to the component that will be added to the `input` tag

```js
const otherProps = {
	"data-testing": true,
	"qa-selection": "checkbox control"
}
<Checkbox label="yes" group="my-group" {...otherProps}  />
```

### SCSS

If you're not using [React](#react), then import the SCSS directly into your application by:

```scss
@forward '@nice-digital/nds-checkbox/scss/checkbox';
```

### HTML

If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:

```html
<div class="checkbox">
	<input
		type="checkbox"
		class="checkbox__input"
		id="contact-preference_email"
		name="contact-preference"
		value="email"
	/>
	<label class="checkbox__label" for="contact-preference_email">
		Email
	</label>
</div>
```

Error state:

```html
<div class="checkbox checkbox--error">
	<input
		type="checkbox"
		class="checkbox__input"
		id="contact-preference_email"
		name="contact-preference"
		value="email"
	/>
	<label class="checkbox__label" for="contact-preference_email">
		Email
	</label>
</div>
```

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