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

checkbox

v4.9.10arrow_drop_down
v4.9.10
v4.5.2
v3.9.2
STATUS
Passing
DOWNLOADS
1,308
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
7 months ago
SIZE
34 KB
If `true`, the component is checked.
2 contributors
Install checkbox as a package?
Copied
npm i @bit/mui-org.material-ui.checkbox
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
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

If true, the component is checked.

The icon to display when the component is checked.

The color of the component. It supports those theme colors that make sense for this component.

If true, the checkbox will be disabled.

If true, the ripple effect will be disabled.

The icon to display when the component is unchecked.

The id of the input element.

If true, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a data-indeterminate attribute on the input.

The icon to display when the component is indeterminate.

Attributes applied to the input element.

Pass a ref to the input element.

Callback fired when the state is changed.

If true, the input element will be required.

The size of the checkbox. small is equivalent to the dense checkbox styling.

The value of the component. The DOM API casts this to a string. The browser uses “on” as the default value.

Properties
NameTypeDescription
checked
bool

If true, the component is checked.

checkedIcon
node

The icon to display when the component is checked.

classes
object

Override or extend the styles applied to the component. See CSS API below for more details.

color
'default' | 'primary' | 'secondary'

The color of the component. It supports those theme colors that make sense for this component.

disabled
bool

If true, the checkbox will be disabled.

disableRipple
bool

If true, the ripple effect will be disabled.

icon
node

The icon to display when the component is unchecked.

id
string

The id of the input element.

indeterminate
bool

If true, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a data-indeterminate attribute on the input.

indeterminateIcon
node

The icon to display when the component is indeterminate.

inputProps
object

Attributes applied to the input element.

inputRef
custom

Pass a ref to the input element.

onChange
function

The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean).

required
bool

If true, the input element will be required.

size
'medium' | 'small'

The size of the checkbox. small is equivalent to the dense checkbox styling.

value
any

The value of the component. The DOM API casts this to a string. The browser uses “on” as the default value.