UNPKG

@kiwicom/orbit-components

Version:

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

kiwicom/orbit

71 lines (50 loc) • 4.67 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
# Checkbox To implement Checkbox component into your project you'll need to add the import: ```jsx import Checkbox from "@kiwicom/orbit-components/lib/Checkbox"; ``` After adding import into your project you can use it simply like: ```jsx <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](#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](#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) | | ## Functional specs for FakeCheckbox - The `hasError` prop will be visible only when the FakeCheckbox is not checked nor disabled. ## Example ```jsx import * as React from "react"; <div role="checkbox" onChange={() => {}}> <Text>Item title</Text> <FakeCheckbox checked={selected} disabled={disabled} /> </div>; ```