Checkbox#

Checkboxes are used when a user needs to select one or more values from a series of options, or they can be used as a binary toggle.

Import#

import { Checkbox, CheckboxField } from 'bumbag'

Usage#

Check me

Editable example

<Checkbox label="Check me" />

<Checkbox label="Check me" />

Fields#

You can also use the <CheckboxField> component, which internally has a FieldWrapper to wrap form controls such as labels, hint text and validation text.

It accepts a combination of Checkbox props and FieldWrapper props.

Check below to subscribe

Check me

Editable example

<CheckboxField
  checkboxLabel="Check me"
  label="Check below to subscribe"
/>

<CheckboxField
  checkboxLabel="Check me"
  label="Check below to subscribe"
/>

Disabled#

Make the checkbox disabled with the disabled prop.

Click me

Editable example

<Checkbox disabled label="Click me" />
<Checkbox checked disabled label="Click me" />

<Checkbox disabled label="Click me" />
<Checkbox checked disabled label="Click me" />

Indeterminate#

Click me

Editable example

<Checkbox label="Click me" checked indeterminate />

<Checkbox label="Click me" checked indeterminate />

States#

A checkbox can use different states (as per palette) such as danger, success and warning.

Click me

Editable example

<Checkbox state="danger" label="Click me" />
<Checkbox state="success" label="Click me" />
<Checkbox state="warning" label="Click me" />
<Checkbox state="primary" label="Click me" />

<Checkbox state="danger" label="Click me" />
<Checkbox state="success" label="Click me" />
<Checkbox state="warning" label="Click me" />
<Checkbox state="primary" label="Click me" />

Controlled Usage#

The previous examples are examples of uncontrolled usage. To control the value yourself, use a combination of onChange and value.

Note: Do not use defaultValue with controlled inputs!

Click me

Editable example

function Example() {
  const [checked, setChecked] = React.useState(true);

  return (
    <Checkbox
      label="Click me"
      checked={checked}
      onChange={e => setChecked(e.target.checked)}
    />
  );
}

function Example() {
  const [checked, setChecked] = React.useState(true);

  return (
    <Checkbox
      label="Click me"
      checked={checked}
      onChange={e => setChecked(e.target.checked)}
    />
  );
}

Accessibility#

The <Checkbox> component follows the WAI ARIA Checkbox Pattern.

Rules#

The checkbox must have a label prop to identify it's label. If a label prop is not provided, an aria-label or aria-labelledby prop can be specified.

Patterns#

The checkbox has a role of checkbox.
The checkbox has an accessible label specified via the label, aria-labelledby or aria-label prop.
When the checkbox has focus, pressing the Space key changes the state of the checkbox.

References#

WAI ARIA Checkbox Pattern

Props#

Checkbox Props#

autoFocus boolean

Automatically focus on the checkbox

checked boolean

Indicates if the checkbox is checked.

inputProps InputHTMLAttributes<any>

Spreads the props onto the <input> element of the checkbox.

defaultChecked boolean

Is the checkbox checked by default?

disabled boolean

Disables the checkbox

checkboxRef ((instance: any) => void) | RefObject<any>

Forwards the ref to the checkbox.

indeterminate boolean

Indicates if the checkbox is indeterminate.

isRequired boolean

Makes the checkbox required and sets aria-invalid to true

label string

Checkbox label

name string

Sets the name of the checkbox.

state string

State of the checkbox. Can be any color in the palette.

value string | boolean

Initial value of the checkbox

onBlur (event: FocusEvent<HTMLInputElement>) => void

Function to invoke when focus is lost

onChange (event: FormEvent<HTMLInputElement>) => void

Function to invoke when checkbox has changed

onFocus (event: FocusEvent<HTMLInputElement>) => void

Function to invoke when checkbox is focused

CheckboxField Props#

checkboxLabel string

Label for the checkbox

checkboxProps

Pick<BoxProps, "unstable_system"
  | "top"
  | "right"
  | "bottom"
  | "left"
  | "children"
  | "defaultChecked"
  | "defaultValue"
  | "suppressContentEditableWarning"
  | "suppressHydrationWarning"
  | ... 777 more ...
  | "themeKey"> & LocalCheckboxProps

Additional props for the Checkbox component

Inherits Checkbox props

autoFocus boolean

Automatically focus on the checkbox

checked boolean

Indicates if the checkbox is checked.

inputProps InputHTMLAttributes<any>

Spreads the props onto the <input> element of the checkbox.

defaultChecked boolean

Is the checkbox checked by default?

disabled boolean

Disables the checkbox

checkboxRef ((instance: any) => void) | RefObject<any>

Forwards the ref to the checkbox.

indeterminate boolean

Indicates if the checkbox is indeterminate.

isRequired boolean

Makes the checkbox required and sets aria-invalid to true

label string

Checkbox label

name string

Sets the name of the checkbox.

state string

State of the checkbox. Can be any color in the palette.

value string | boolean

Initial value of the checkbox

onBlur (event: FocusEvent<HTMLInputElement>) => void

Function to invoke when focus is lost

onChange (event: FormEvent<HTMLInputElement>) => void

Function to invoke when checkbox has changed

onFocus (event: FocusEvent<HTMLInputElement>) => void

Function to invoke when checkbox is focused

Inherits FieldWrapper props

children

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>
  | (({ elementProps }: { ...; }) => ReactNode)

description

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the description text of the field wrapper.

hint

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the bottom hint text of the field wrapper.

isOptional boolean

Sets the optional flag (and displays optional text) on the field wrapper.

labelType "label" | "legend"

Sets the label type on the field wrapper.

tooltip

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the tooltip of the field wrapper. Can be either a string, or a React component.

tooltipTriggerComponent

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the tooltip trigger component.

validationText string

Sets the bottom validation text of the field wrapper.

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Theming#

Checkbox#

Checkbox.styles.base

Click me

Checkbox.Icon.styles.base

Click me

Checkbox.Label.styles.base

Click me

Checkbox.HiddenInput.styles.base

Click me

CheckboxField#

CheckboxField.styles.base

Check below to subscribe

Click me

On this page