Checkbox

Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

install	`yarn add @react-spectrum/checkbox`
version	3.0.0-rc.1
usage	`import {Checkbox} from '@react-spectrum/checkbox'`

View guidelines

Spectrum

Example#

<Checkbox>Checkbox Label</Checkbox>

Content#

Checkboxes accept children, which are rendered as the label.

Accessibility#

In certain cases a visible label isn't needed. For example, a checkbox used to select a table row. If a visible label isn't specified, an aria-label must be provided to the Checkbox for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead.

Internationalization#

To internationalize a Checkbox, a localized label should be passed to the children or aria-label prop.

Value#

Checkboxes are not selected by default. The defaultSelected prop can be used to set the default state (uncontrolled). Alternatively, the isSelected prop can be used to make the selected state controlled.

<Checkbox defaultSelected>Uncontrolled</Checkbox>
<Checkbox isSelected>Controlled</Checkbox>

Indeterminate#

View guidelines

A Checkbox can be in an indeterminate state, controlled using the isIndeterminate prop. This overrides the selection state, whether controlled or uncontrolled. The Checkbox will remain in an indeterminate state until the isIndeterminate prop is set to false, regardless of user interaction.

<Checkbox isIndeterminate>Checkbox Label</Checkbox>

Events#

Checkboxes accept a user defined onChange prop, triggered whenever the Checkbox is clicked. The example below uses onChange to alert the user to changes in the checkbox's state.

function Example() {
  let [selected, setSelection] = React.useState('false');

  let toggle = (value) => {
    value ? setSelection('true') : setSelection('false');
  }

  return (
    <div>
      <div> The Checkbox is checked: {selected} </div>
      <Checkbox onChange={toggle}>
        Checkbox Label
      </Checkbox>
    </div>
  );
 }

Validation#

Checkboxes can display a validation state to communicate to the user if the current value is invalid. Implement your own validation logic in your app and pass "invalid" to the Checkbox via the validationState prop.

<Checkbox validationState="invalid">Checkbox Label</Checkbox>

Props#

Name	Type	Default	Description
`isEmphasized`	`boolean`	—	By default, checkboxes are not emphasized (gray). This prop sets the emphasized style (blue) which provides visual prominence.
`isIndeterminate`	`boolean`	—	Indeterminism is presentational, when a checkbox is indeterminate, it overrides the selection state. The indeterminate visual representation remains even after subsequent clicks .
`children`	`ReactNode`	—
`defaultSelected`	`boolean`	—
`isSelected`	`boolean`	—
`value`	`string`	—
`name`	`string`	—
`isDisabled`	`boolean`	—	Whether the input is disabled.
`isRequired`	`boolean`	—	Whether user input is required on the input before form submission. Often paired with the `necessityIndicator` prop to add a visual indicator to the input.
`validationState`	`ValidationState`	`"valid"`	Whether the input should display its "valid" or "invalid" visual styling.
`isReadOnly`	`boolean`	—	Whether the input can be selected but not changed by the user.
`autoFocus`	`boolean`	—	Whether the element should receive focus on render
`UNSAFE_className`	`string`	—
`UNSAFE_style`	`CSSProperties`	—

Events

Name	Type	Default	Description
`onChange`	`(isSelected: boolean) => void`	—
`onFocus`	`(e: FocusEvent) => void`	—	Handler that is called when the element receives focus.
`onBlur`	`(e: FocusEvent) => void`	—	Handler that is called when the element loses focus.
`onFocusChange`	`(isFocused: boolean) => void`	—	Handler that is called when the element's focus status changes.
`onKeyDown`	`(e: KeyboardEvent) => void`	—	Handler that is called when a key is pressed.
`onKeyUp`	`(e: KeyboardEvent) => void`	—	Handler that is called when a key is released.

Layout

Name	Type	Default	Description
`flex`	`string \| number \| boolean`	—
`flexGrow`	`number`	—
`flexShrink`	`number`	—
`flexBasis`	`number \| string`	—
`alignSelf`	`'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'stretch'`	—
`justifySelf`	`'auto' \| 'normal' \| 'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'self-start' \| 'self-end' \| 'center' \| 'left' \| 'right' \| 'stretch'`	—
`flexOrder`	`number`	—
`gridArea`	`string`	—
`gridColumn`	`string`	—
`gridRow`	`string`	—
`gridColumnStart`	`string`	—
`gridColumnEnd`	`string`	—
`gridRowStart`	`string`	—
`gridRowEnd`	`string`	—
`slot`	`string`	—

Spacing

Name	Type	Default	Description
`margin`	`DimensionValue`	—
`marginTop`	`DimensionValue`	—
`marginLeft`	`DimensionValue`	—
`marginRight`	`DimensionValue`	—
`marginBottom`	`DimensionValue`	—
`marginStart`	`DimensionValue`	—
`marginEnd`	`DimensionValue`	—
`marginX`	`DimensionValue`	—
`marginY`	`DimensionValue`	—

Sizing

Name	Type	Default	Description
`width`	`DimensionValue`	—
`minWidth`	`DimensionValue`	—
`maxWidth`	`DimensionValue`	—
`height`	`DimensionValue`	—
`minHeight`	`DimensionValue`	—
`maxHeight`	`DimensionValue`	—

Positioning

Name	Type	Default	Description
`position`	`'static' \| 'relative' \| 'absolute' \| 'fixed' \| 'sticky'`	—
`top`	`DimensionValue`	—
`bottom`	`DimensionValue`	—
`left`	`DimensionValue`	—
`right`	`DimensionValue`	—
`start`	`DimensionValue`	—
`end`	`DimensionValue`	—
`zIndex`	`number`	—
`isHidden`	`boolean`	—

Accessibility

Name	Type	Default	Description
`role`	`string`	—
`id`	`string`	—
`tabIndex`	`number`	—
`aria-label`	`string`	—	Defines a string value that labels the current element.
`aria-labelledby`	`string`	—	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	—	Identifies the element (or elements) that describes the object.
`aria-controls`	`string`	—	Identifies the element (or elements) whose contents or presence are controlled by the current element.
`aria-owns`	`string`	—	Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
`aria-hidden`	`boolean \| 'false' \| 'true'`	—	Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

'valid' | 'invalid'

ReactFocusEvent<any> & {stopPropagation: () => void,
continuePropagation: () => void
}

ReactKeyboardEvent<any> & {stopPropagation: () => void,
continuePropagation: () => void
}

'size-0'
  | 'size-10'
  | 'size-25'
  | 'size-40'
  | 'size-50'
  | 'size-65'
  | 'size-75'
  | 'size-85'
  | 'size-100'
  | 'size-115'
  | 'size-125'
  | 'size-130'
  | 'size-150'
  | 'size-160'
  | 'size-175'
  | 'size-200'
  | 'size-225'
  | 'size-250'
  | 'size-300'
  | 'size-350'
  | 'size-400'
  | 'size-450'
  | 'size-500'
  | 'size-550'
  | 'size-600'
  | 'size-675'
  | 'size-700'
  | 'size-800'
  | 'size-900'
  | 'size-1000'
  | 'size-1200'
  | 'size-1250'
  | 'size-1600'
  | 'size-1700'
  | 'size-2000'
  | 'size-2400'
  | 'size-3000'
  | 'size-3400'
  | 'size-3600'
  | 'size-4600'
  | 'size-5000'
  | 'size-6000'
  | 'static-size-0'
  | 'static-size-10'
  | 'static-size-25'
  | 'static-size-50'
  | 'static-size-40'
  | 'static-size-65'
  | 'static-size-100'
  | 'static-size-115'
  | 'static-size-125'
  | 'static-size-150'
  | 'static-size-175'
  | 'static-size-200'
  | 'static-size-225'
  | 'static-size-250'
  | 'static-size-300'
  | 'static-size-400'
  | 'static-size-450'
  | 'static-size-500'
  | 'static-size-550'
  | 'static-size-600'
  | 'static-size-700'
  | 'static-size-800'
  | 'static-size-900'
  | 'static-size-1000'
  | 'static-size-1200'
  | 'static-size-1700'
  | 'static-size-2400'
  | 'static-size-2600'
  | 'static-size-3400'
  | 'static-size-3600'
  | 'static-size-4600'
  | 'static-size-5000'
  | 'static-size-6000'
  | 'single-line-height'
  | 'single-line-width'
  | string
  | number

Visual Options#

isDisabled#

View guidelines

<Checkbox isDisabled>Checkbox Label</Checkbox>

isEmphasized#

View guidelines

<Checkbox isEmphasized>Checkbox Label</Checkbox>