Checkbox

Purpose

The checkbox component is used to indicate an input that can have a boolean state (on/off), as well as indicating an indeterminate state.

Usage

import Checkbox from '@wedgekit/checkbox';

const Example = () => {
  const [allDayEvent, setAllDayEvent] = React.useState(false);
  return (
    <Checkbox
      label="My Checkbox"
      value={allDayEvent}
      onChange={(newValue) => {
        setAllDayEvent(newValue);
      }}
    />
  );
};

render(<Example />);

Props

className

Type: string

required: ❌

This is exposed but is only here so that styled-components will be able to style components correctly. Please do not use this unless you really know what you are doing.

disabled

Type: boolean

Required: ❌

Indicates whether the checkbox is disabled.

id

Type: string

Required: ❌

A string the will be passed into the onChange function indicating the ID of the checkbox that changed.

indeterminate

Type: boolean

Required: ❌

Indicates whether the checkbox is displayed as being in an indeterminate state. The indeterminate state is purely a visual state and the checkbox will still be checked or unchecked irrespective of this property. If indeterminate is true, the checkbox will show the indeterminate indicator. If false or unset, the checkbox will display as either checked or unchecked.

info

Type: InfoObject

Required: ❌

Passing an InfoObject to the info prop will populate an InfoButton adjacent to the checkbox's label.

label

Type: string

Required: ✅

A descriptive label describing the purpose of the checkbox.

labelHidden

Type: boolean

Required: ❌

Indicates whether to visibly display the label. The label will always be available to users of screen readers via aria-label.

name

DEPRECATED

Type: string

Required: ❌

The functionality of this prop has been moved to id.

required

Type: boolean

Required: ❌

Indicates whether the checkbox is required.

status

Type: 'default' | 'error' | 'success' | 'pending'

Required: ❌

Indicates the validation status. Used for styling purposes.

tabIndex

Type: number

Required: ❌

Prop used to interrupt the normal tab order of a page. It is recommend that tabIndex only be 0 or -1

onChange

Type: (checked: boolean, id: string, event: SyntheticEvent<*>) => void

Required: ✅

A function that is called when the checkbox is toggled.

Styling

The checkbox label is contained within a @wedgekit/primitives Label, which can be overridden to change the text styling.