Checkbox

A checkbox is an input control that allows a user to select one or more options from a number of choices.

Neutral selected states

When the platform-dst-tokens-finesse feature flag is enabled, this component uses the new neutral treatment for selected states.

Package installation information
Install	`yarn add @atlaskit/checkbox`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/checkbox, (opens new window)
Bundle	unpkg.com, (opens new window)

`analyticsContext`
Description	Additional information to be included in the `context` of analytics events that come from radio.
Type	`{ [x: string]: any; }`

`defaultChecked`
Description	Sets whether the checkbox begins as checked or unchecked.
Type	`boolean`

`id`
Description	The ID assigned to the input.
Type	`string`

`isChecked`
Description	Sets whether the checkbox is checked or unchecked.
Type	`boolean`

`isDisabled`
Description	Sets whether the checkbox is disabled. Don’t use a disabled checkbox if it needs to remain in the tab order for assistive technologies.
Type	`boolean`

`isIndeterminate`
Description	Sets whether the checkbox is indeterminate. This only affects the style and does not modify the isChecked property.
Type	`boolean`

`isInvalid`
Description	Marks the field as invalid. Changes style of unchecked component.
Type	`boolean`

`isRequired`
Description	Marks the field as required & changes the label style.
Type	`boolean`

`label`
Description	The label to be displayed to the right of the checkbox. The label is part of the clickable element to select the checkbox.
Type	`string \| number \| ReactElement<any, string \| JSXElementConstructor<any>>`

`name`
Description	The name of the submitted field in a checkbox.
Type	`string`

`onChange`
Description	Function that is called whenever the state of the checkbox changes. It will be called with an object containing the react synthetic event. Use `currentTarget` to get value, name and checked.
Type	`(e: ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void`

`ref`
Description	No description.
Type	`((instance: HTMLInputElement) => void) \| RefObject<HTMLInputElement>`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests we have generated testid based on the one you pass to the Checkbox component: `{testId}--hidden-checkbox` to check if it got changed to checked/unchecked.
Type	`string`

`value`
Description	The value to be used in the checkbox input. This is the value that will be returned on form submission.
Type	`string \| number`

`xcss`
Description	Bounded style API. Defining allowed styles through this prop will be supported for future component iterations. Any styles that are not allowed by this API will result in type and land blocking violations.
Type	`false \| (XCSSValue<"alignItems", DesignTokenStyles, ""> & {} & XCSSPseudo<"alignItems", never, never, DesignTokenStyles> & XCSSMediaQuery<...> & { ...; } & { ...; })`

We use this feedback to improve our documentation.