UNPKG

@gravity-ui/uikit

Version:

Gravity UI base styling and components

github.com/gravity-ui/uikit

gravity-ui/uikit

77 lines (62 loc) • 5.13 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
72
73
74
75
76
77
# Checkbox The `Checkbox` component allows the user to select or deselect a specific value. ```tsx import {Checkbox} from '@gravity-ui/uikit'; ``` ## States A `Checkbox` can have different states: - Checked: The checkbox is ticked. - Disabled: The checkbox is unavailable. - Indeterminate: The checkbox is in an intermediate state between being ticked and unticked. ```tsx <Checkbox size="l" checked={false}>Unchecked</Checkbox> <Checkbox size="l" checked>Checked</Checkbox> <Checkbox size="l" disabled>Disabled</Checkbox> <Checkbox size="l" indeterminate>Indeterminate</Checkbox> ``` ## Size Use the `size` property to manage the `Checkbox` size. The default size is `m`. ```tsx <Checkbox size="m">M Size</Checkbox> <Checkbox size="l">L Size</Checkbox> <Checkbox size="xl">XL Size</Checkbox> ``` ## Label You can assign a label to a `Checkbox` using the `content` property or provide it as a child property. ```tsx <div> <Checkbox content="Content" size="l" /> <div style={{ marginTop: 10, }} > <Checkbox size="l"> <span>Content as children</span> </Checkbox> </div> </div> ``` ## Properties | Name | Description | Type | Default | | :------------- | :---------------------------------------------------------------------------------------------------- | :-------------------------------------------: | :-----: | | children | Checkbox content (usually, a label). | `ReactNode` | | | content | Checkbox content (alternative to children). | `ReactNode` | | | disabled | Toggles the `disabled` state of the checkbox. | `boolean` | `false` | | checked | Toggles the `checked` state of the checkbox. | `boolean` | `false` | | defaultChecked | Sets the initial checked state when the component is mounted. | `boolean` | `false` | | onUpdate | Fires when the user changes the checkbox state and provides the checked value as a callback argument. | `(checked: boolean) => void` | | | onChange | Fires when the user changes the checkbox state and provides the change event as a callback argument. | `Function` | | | onFocus | Event handler to use when the checkbox input element receives focus. | `Function` | | | onBlur | Event handler to use when the checkbox input element loses focus. | `Function` | | | size | Determines the checkbox size. | `m` `l` | `m` | | id | `id` HTML attribute | `string` | | | qa | `data-qa` HTML attribute, used for testing | `string` | | | style | `style` HTML attribute | `React.CSSProperties` | | | className | `class` HTML attribute | `string` | | | title | `title` HTML attribute | `string` | | | name | `name` HTML attribute for the input element. | `string` | | | value | `value` HTML attribute for the input element. | `string` | | | indeterminate | Toggles the `indeterminate` state of the checkbox. | `boolean` | `false` | | controlProps | Additional propeties for the underlying input element. | `React.InputHTMLAttributes<HTMLInputElement>` | | | controlRef | Ref to the underlying input element. | `React.Ref<HTMLInputElement>` | |