UNPKG

@dotconnor/grommet

Version:

focus on the essential experience

307 lines (191 loc) 4.45 kB
## CheckBox A checkbox toggle control. [![](https://cdn-images-1.medium.com/fit/c/120/120/1*TD1P0HtIH9zF0UEH28zYtw.png)](https://storybook.grommet.io/?selectedKind=Input-CheckBox&full=0&stories=1&panelRight=0) [![](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/checkbox&module=%2Fsrc%2FCheckBox.js) ## Usage ```javascript import { CheckBox } from 'grommet'; <CheckBox /> ``` ## Properties **a11yTitle** Custom label to be used by screen readers. When provided, an aria-label will be added to the element. ``` string ``` **checked** Same as React <input checked={} /> ``` boolean ``` **disabled** Same as React <input disabled={} />. Also adds a hidden input element with the same name so form submissions work. ``` boolean ``` **id** The DOM id attribute value to use for the underlying <input/> element. ``` string ``` **label** Label text to place next to the control. Can be used instead of a11yTitle to meet accessibility requirements ``` node ``` **name** The DOM name attribute value to use for the underlying <input/> element. ``` string ``` **onChange** Function that will be called when the user clicks the check box. It will be passed a React event object. The current state can be accessed via event.target.checked. Same as React <input onChange={} />. ``` function ``` **reverse** Whether to show the label in front of the checkbox. ``` boolean ``` **toggle** Whether to visualize it as a toggle switch. ``` boolean ``` **indeterminate** Whether state is indeterminate. NOTE: This can only be used with non-toggle components ``` boolean ``` ## Intrinsic element ``` input ``` ## Theme **checkBox.border.color** The border color when unchecked. Expects `string | { 'dark': string, 'light': string }`. Defaults to ``` { dark: 'rgba(255, 255, 255, 0.5)', light: 'rgba(0, 0, 0, 0.15)' } ``` **checkBox.border.width** The border width when unchecked. Expects `string`. Defaults to ``` 2px ``` **checkBox.check.extend** Any additional style for checked CheckBox. Expects `string | (props) => {}`. Defaults to ``` undefined ``` **checkBox.check.radius** The radius of the checked icon. Expects `string`. Defaults to ``` 4px ``` **checkBox.check.thickness** The stroke width of the checked icon. Expects `string`. Defaults to ``` 4px ``` **checkBox.color** The stroke color for the CheckBox icon, and the border when checked. Expects `string | { 'dark': string, 'light': string }`. Defaults to ``` undefined ``` **checkBox.extend** Any additional style for CheckBox. Expects `string | (props) => {}`. Defaults to ``` undefined ``` **checkBox.gap** The right margin of the CheckBox to its label. Expects `string`. Defaults to ``` undefined ``` **checkBox.hover.border.color** The border color on hover. Expects `string | { 'dark': string, 'light': string }`. Defaults to ``` { dark: 'white', light: 'black' } ``` **checkBox.icon.size** The size of the checked icon. Expects `string`. Defaults to ``` undefined ``` **checkBox.icon.extend** Any additional style for CheckBox icon. Expects `string | (props)=>{}`. Defaults to ``` undefined ``` **checkBox.icons.checked** The icon to use when checked. Expects `React.Element`. Defaults to ``` undefined ``` **checkBox.icons.indeterminate** The icon to use when indeterminate. Expects `React.Element`. Defaults to ``` undefined ``` **checkBox.size** The height and width used for the CheckBox icon. Expects `string`. Defaults to ``` 24px ``` **checkBox.toggle.background** The background color of the toggle. Expects `string | { 'dark': string, 'light': string }`. Defaults to ``` undefined ``` **checkBox.toggle.color** The color of the toggle knob. Expects `string | { 'dark': string, 'light': string }`. Defaults to ``` { dark: '#d9d9d9', light: '#d9d9d9' } ``` **checkBox.toggle.extend** Any additional style for CheckBox toggle. Expects `string | (props) => {}`. Defaults to ``` undefined ``` **checkBox.toggle.knob.extend** Any additional style for the CheckBox toggle knob. Expects `string | (props) => {}`. Defaults to ``` undefined ``` **checkBox.toggle.radius** The border radius used for the toggle and the knob. Expects `string`. Defaults to ``` 24px ``` **checkBox.toggle.size** The width size of the toggle. Expects `string`. Defaults to ``` 48px ```