Checkbox

The Checkbox component is used in forms when a user needs to select multiple values from several options.

Installation

yarn add @neokit/checkbox

Import

import { Checkbox } from '@neokit/checkbox';

Basic Usage

<Checkbox>Checkbox</Checkbox>

Checked Checkbox

<Checkbox isChecked>Checkbox</Checkbox>

Disabled Checkbox

<Checkbox isDisabled>Checkbox</Checkbox>
<Checkbox isChecked isDisabled>Checkbox</Checkbox>

Checkbox with custom color

You can override the background color of the Checkbox to any color.

<Checkbox isChecked>Checkbox</Checkbox>
<Checkbox isChecked bgColor="#000000">Checkbox</Checkbox>
<Checkbox isChecked bgColor="#3276C5">Checkbox</Checkbox>

Changing the icon color and size

You can customize the color of the check icon by passing the iconColor prop.

<Checkbox
  isChecked
  bgColor="#90CAF9"
  iconColor="#000000">
  Option
</Checkbox>

Indeterminate

<Checkbox
  isChecked
  isIndeterminate>
  Parent Checkbox
</Checkbox>