grommet
components

CheckBox

a checkbox toggle control

Storybook
CodeSandbox

Props

checked

Same as React <input checked={} />
truefalse

disabled

Same as React <input disabled={} />. Also adds a hidden input element with the same name so form submissions work.

truefalse

id

The DOM id attribute value to use for the underlying <input/> element.
"a-dom-id"

indeterminate

Whether state is indeterminate. NOTE: This can only be used with non-toggle components

truefalse

label

Label text to place next to the control.
"enabled"
<Box>...</Box>

name

The DOM name attribute value to use for the underlying <input/> element.

"a-dom-name"

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={} />.

() => {}

reverse

Whether to show the label in front of the checkbox.
truefalse

toggle

Whether to visualize it as a toggle switch.
truefalse

Theme

checkBox.border.color

The border color when unchecked.
{
  "dark": "rgba(255, 255, 255, 0.5)",
  "light": "rgba(0, 0, 0, 0.15)"
}

checkBox.border.width

The border width when unchecked.
"2px"

checkBox.check.extend

Any additional style for checked CheckBox.
"any CSS"
(props) => {}

checkBox.check.radius

The radius of the checked icon.
"4px"

checkBox.check.thickness

The stroke width of the checked icon.
"4px"

checkBox.color

The stroke color for the CheckBox icon, and the border when checked.
string | { 'dark': string, 'light': string }

checkBox.extend

Any additional style for CheckBox.
"any CSS"
(props) => {}

checkBox.gap

The right margin of the CheckBox to its label.
string

checkBox.hover.border.color

The border color on hover.
{"dark": "white", "light": "black"}

checkBox.icon.size

The size of the checked icon.
string

checkBox.icon.extend

Any additional style for CheckBox icon.
"any CSS"
(props) => {}

checkBox.icons.checked

The icon to use when checked.
React.Element

checkBox.icons.indeterminate

The icon to use when indeterminate.
React.Element

checkBox.size

The height and width used for the CheckBox icon.
"24px"

checkBox.toggle.background

The background color of the toggle.
string | { 'dark': string, 'light': string }

checkBox.toggle.color

The color of the toggle knob.
{"dark": "#d9d9d9", "light": "#d9d9d9"}

checkBox.toggle.extend

Any additional style for CheckBox toggle.
"any CSS"
(props) => {}

checkBox.toggle.knob.extend

Any additional style for the CheckBox toggle knob.
"any CSS"
(props) => {}

checkBox.toggle.radius

The border radius used for the toggle and the knob.
"24px"

checkBox.toggle.size

The width size of the toggle.
"48px"