Enables users to pick multiple options from a group.


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" />


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

checkedbooleanfalseIf true, the Checkbox will be checked.
disabledbooleanfalseIf true, the Checkbox will be set up as disabled.
dataTeststringOptional prop for testing purposes.
idstringSet id for Checkbox
hasErrorbooleanfalseIf true, the border of the Checkbox will turn red. See Functional specs
infoReact.NodeThe additional info about the Checkbox.
labelstringThe label of the Checkbox.
namestringThe name for the Checkbox.
onChangeevent => void \| PromiseFunction for handling onChange event.
reffuncProp for forwarded ref of the Checkbox. See Functional specs
tabIndexstring \| numberSpecifies the tab order of an element
tooltipElement<Tooltip>Optional property when you need to attach Tooltip to the Checkbox. See Functional specs
valuestringThe value of the Checkbox.

Functional specs

  • The hasError prop will be visible only when the Checkbox has checked or disabled prop set on false.

  • ref can be used for example auto-focus the elements immediately after render.

import * as React from "react";
class Component extends React.PureComponent<Props> {
componentDidMount() {
this.ref.current && this.ref.current.focus();
ref: { current: React.ElementRef<*> | null } = React.createRef();
render() {
return <Checkbox ref={this.ref} />;
  • The tooltip property is useful when you need to visually attach Tooltip component only to the Checkbox’s glyph, not the label or other parts of the Checkbox.