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 |
---|---|---|---|
checked | boolean |
false |
If true , the Checkbox will be checked. |
disabled | boolean |
false |
If true , the Checkbox will be set up as disabled. |
dataTest | string |
Optional prop for testing purposes. | |
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 | |
tooltip | Element<Tooltip> |
Optional property when you need to attach Tooltip to the Checkbox. See Functional specs | |
value | string |
The value of the Checkbox. |
Functional specs
-
The
hasError
prop will be visible only when the Checkbox haschecked
ordisabled
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 thelabel
or other parts of the Checkbox.