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#

Editable example

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
Editable example

Disabled#

Make the checkbox disabled with the disabled prop.

Editable example

Indeterminate#

Editable example

States#

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

Editable example

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!

Editable example

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#

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
Checkbox.Icon.styles.base
Checkbox.Label.styles.base
Checkbox.HiddenInput.styles.base

CheckboxField#

CheckboxField.styles.base
Check below to subscribe
Copyright © 2021 Jake Moxey