Checkbox

Checkboxes let users select multiple options at once.

Checkbox

Checkboxes let users select multiple options at once.

Checkbox LabelCheckbox LabelCheckbox LabelThe Checkbox Component.

Usage

The checkbox component allows the active selection of one or more input values at a time. It typically appears in forms and modals. If you require the user to select a single option from a series of items, then the Radio Button component should be used instead.

Anatomy

Checkbox LabelCheckbox ButtonLabel12The Checkbox Anatomy.
  1. Checkbox Button. The checkbox is a single value toggle.
  2. Label (Optional). Used to provide context to the Checkbox Button.

States

DefaultHover/ActiveCheckedThe Checkbox States.

The Checkbox Button has three available states - Default, Hover/Active, and Checked.

The Checkbox component allows the active selection of an arbitrary amount of options. The initial release for this component has been written to work with Formik though a Redux Forms variation will follow.

The Checkbox component can be used on it's own in a regular form, if you use the correct syntax, or used within a Formik form as the render component for a Field.

Example with Formik

<Checkbox name="example1" label="My Label 1" value="true" isChecked />

Properties

The Checkbox component accepts the standard field properties as defined by Formik but is also responsible for rendering an optional field label and any information or error messages associated with the field:

FieldProps
NameTypeRequiredDefaultDescription
namestringFalsen/aThe field name
valuestringFalsen/aThe field current value
onChange(React.SyntheticEvent):voidTruen/aCalled when the field value changes
onBlur(React.SyntheticEvent):voidTruen/aCalled when the field loses focus

FormProps
NameTypeRequiredDefaultDescription
errors{ string: string }False{}A hashmap using the field name as a key and the error message associated with it
touched{ string: boolean }False{}A hashmap using the field name as a key and indicating if it has been touched or not

Checkbox
NameTypeRequiredDefaultDescription
classNamestringFalsen/aOptional additional css class to associate with the component wrapper
idstringFalseunique idProvide the ID for a field and tie it to its label. If one is not provided then a unique id will be created
isCheckedbooleanFalsefalseWhether the checkbox is checked or not.
isDisabledbooleanFalsefalseMark the field as disabled/inactive
fieldFieldPropsTruen/aCan be manually provided or sent from Formik. Indicates any errors and which fields have been touched
labelstringFalsen/aIdeally a field should include a label to help the user understand what the field is for and help screen readers