Skip to content
Telescope
Components

Checkbox

A form element that enables users to make a binary choice (checked/unchecked).

Basic usage

First, import the component.

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

Then use it, like so:

API reference

The component accepts the following props.

PropTypeDefault
indeterminate
boolean
isInvalid
boolean
isRequired
boolean
false
onChange
function
() => {}
onClick
function
skeleton
boolean
false

Examples

Required

To ensure accessibility, use the isRequired property (not the HTML required property) to mark a field as required for assistive technologies (such as screen readers).

Information:
Visually, you should mark the minority of fields in a form as "required" or "optional".
<Checkbox isRequired>I love expenses</Checkbox>

Usage with Formik

For the sake of convenience, we provide a Formik version of this component. By using the `useField` hook it automatically handles value changes, blur events, error messages, and touched state for you. We recommend Yup for form validation.

Information:
The validation behaviour of the Formik component may not always be inline with those in our Form guidelines, so please review before usage.
<Formik
    initialValues={{subscribe: false}}
    onSubmit={(data) => alert(JSON.stringify(data, null, 2))}
    validationSchema={yup.object().shape({subscribe: yup.boolean()})}
>
    <Form>
        <Stack space={24}>
            <FormikCheckbox name="subscribe">I want to receive updates</FormikCheckbox>
            <Button type="submit">Submit</Button>
        </Stack>
    </Form>
</Formik>

Accessibility

The implementation of this component has been informed by our form accessibility guidelines.

On this page