Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

check-box

v2.11.1arrow_drop_down
v2.11.1
v2.6.5
v2.5.5
STATUS
Passing
DOWNLOADS
1,017
LICENSE
Apache 2.0
VISIBILITY
Public
PUBLISHED
5 months ago
SIZE
32 KB
A checkbox toggle control.
2 contributors
Install check-box as a package?
Copied
npm i @bit/grommet.grommet.check-box
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
chevron_left
chevron_right

CheckBox

A checkbox toggle control.

Usage

import { CheckBox } from 'grommet';
<CheckBox />

Properties

checked

Same as React

boolean

disabled

Same as React . 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 element.

string

label

Label text to place next to the control.

node

name

The DOM name attribute value to use for the underlying 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 .

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