Checkbox

To implement Checkbox component into your project you’ll need to add the import:

import Checkbox from "@kiwicom/orbit-components/lib/Checkbox";

After adding import into your project you can use it simply like:

<Checkbox label="Checkbox" />

Props

Table below contains all types of the props available in Checkbox component.

Name	Type	Default	Description
ariaControls	`string`		Identifies the element whose contents or presence are controlled by the Checkbox.
ariaDescribedby	`string`		Identifies the element that describes the Checkbox, providing additional information.
checked	`boolean`		If `true`, the Checkbox will be checked.
defaultChecked	`boolean`		If `true`, the Checkbox will be checked by default. Only to be used in uncontrolled.
disabled	`boolean`	`false`	If `true`, the Checkbox will be set up as disabled.
dataTest	`string`		Optional prop for testing purposes.
id	`string`		Set `id` for `Checkbox`
hasError	`boolean`	`false`	If `true`, the border of the Checkbox will turn red. See Functional specs
info	`React.Node`		The additional info about the Checkbox.
label	`string`		The label of the Checkbox.
name	`string`		The name for the Checkbox.
onChange	`event => void \\| Promise`		Function for handling onChange event.
ref	`func`		Prop for forwarded ref of the Checkbox. See Functional specs
tabIndex	`string \\| number`		Specifies the tab order of an element
value	`string`		The value of the Checkbox.

Functional specs

The hasError prop will be visible only when the Checkbox is not checked nor disabled.
ref can be used, for example, to control focus or to get the status (checked) of the element.

FakeCheckbox

The FakeCheckbox component was created for accessibility reasons and offers only a visual presentation of the Checkbox component. It does not have any functionality and accepts only state props - disabled, checked, hasError.

Props

Table below contains all types of the props available in FakeCheckbox component.

Name	Type	Default	Description
checked	`boolean`	`false`	If `true`, the FakeCheckbox will be checked.
disabled	`boolean`	`false`	If `true`, the FakeCheckbox will be set up as disabled.
hasError	`boolean`	`false`	If `true`, the border of the FakeCheckbox will turn red. See Functional specs

Functional specs for FakeCheckbox

The hasError prop will be visible only when the FakeCheckbox is not checked nor disabled.

Example

import * as React from "react";
<div role="checkbox" onChange={() => {}}>
  <Text>Item title</Text>
  <FakeCheckbox checked={selected} disabled={disabled} />
</div>;