Checkbox

size
content
checked
disabled
indeterminate
import {Checkbox} from '@gravity-ui/uikit';

The Checkbox component allows the user to select or deselect a specific value.

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.
<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.

<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.

<div>
  <Checkbox content="Content" size="l" />
  <div
      style={{
          marginTop: 10,
      }}
  >
      <Checkbox size="l">
          <span>Content as children</span>
      </Checkbox>
  </div>
</div>

Properties

NameDescriptionTypeDefault
childrenCheckbox content (usually, a label).ReactNode
contentCheckbox content (alternative to children).ReactNode
disabledToggles the disabled state of the checkbox.booleanfalse
checkedToggles the checked state of the checkbox.booleanfalse
defaultCheckedSets the initial checked state when the component is mounted.booleanfalse
onUpdateFires when the user changes the checkbox state and provides the checked value as a callback argument.(checked: boolean) => void
onChangeFires when the user changes the checkbox state and provides the change event as a callback argument.Function
onFocusEvent handler to use when the checkbox input element receives focus.Function
onBlurEvent handler to use when the checkbox input element loses focus.Function
sizeDetermines the checkbox size.m lm
idid HTML attributestring
qadata-qa HTML attribute, used for testingstring
stylestyle HTML attributeReact.CSSProperties
classNameclass HTML attributestring
titletitle HTML attributestring
namename HTML attribute for the input element.string
valuevalue HTML attribute for the input element.string
indeterminateToggles the indeterminate state of the checkbox.booleanfalse
controlPropsAdditional propeties for the underlying input element.React.InputHTMLAttributes<HTMLInputElement>
controlRefRef to the underlying input element.React.Ref<HTMLInputElement>