Skip to content
Telescope

Checkbox

Checkboxes are most commonly used when there are multiple items to select in a list. Users can select zero, one, or any number of items.

Features

  • Supports invalid state
  • Supports indeterminate state
  • Formik wrapper available

When to use

At Pleo, we often use checkboxes for users to apply filters to lists. They are also commonly used to ensure that users consent/understand the consequence of performing an action.

Examples

Disabled

Invalid

Invalid with error message

To add an error message, you'll need to use our Form control component.

Error:
Admit that you love expenses

Required

Use the isRequired property to programmatically (not visually) mark a checkbox as required. This sets aria-required="true" on the checkbox, which communicates to assistive technology (e.g. screen readers) that the checkbox is required.

Indeterminate

When a checkbox is linked to several other sub-checkboxes who's values aren't all the same, it should show up in an indeterminate state. Clicking or tapping on it once should make it checked and change all sub-checkboxes to selected. A second click or tap should uncheck it and set all the sub-checkboxes to unselected.

Skeleton

The skeleton property is used to display a loading state for the component while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.

Information:

If you submit a form with an indeterminate checkbox, the same thing happens as if the checkbox were unchecked — no data is submitted to represent the checkbox.

Usage with Formik

We provide a formik wrapper for this component. It accepts the same props as the regular Input but requires an additional name prop.

import {FormikCheckbox} from '@pleo-io/telescope'


export default () => (
    <Formik initialValues={{checked: true}}>
        <Form>
            <FormikCheckbox name="checked">I love expenses</Checkbox>
        </Form>
    </Formik>
)

Checkbox group

If you have multiple checkboxes that are related to each other, wrap them in a CheckboxGroup component so that we can achieve a consistent layout between form elements.

Related components

  • Form control: Form control displays a labelled input and, optionally, associated validation text and/or hint text.
  • Radio group: A form element that allow users to select an single option from a list of at least two options.
  • Segmented control: A hybrid somewhere between a button group, radio buttons, and tabs; segmented controls are used to switch between different options or views.
  • Switch: A control used to switch between two states - often on or off.