Checkbox

This component allows users to select one or more items from a set

Basic Usage


import { Checkbox } from '@krakentech/coral';
 
<Checkbox label="Checkbox label" />;

Checkbox label

Properties

checked (for controlled input)


const [isChecked, setIsChecked] = useState(false);
const onChange = (_, checked) => {
    setIsChecked(checked);
};
<Checkbox label="Checkbox label" checked={isChecked} onChange={onChange} />
 
<Button
    color="secondary"
    size="small"
    onClick={() => setIsChecked(!isChecked)}
>
    {isChecked ? 'Uncheck the box' : 'Check the box'}
</Button>

Checkbox label

disabled


<Checkbox label="Checkbox label" disabled />

Checkbox label

error / errorMessage


<Checkbox label="Checkbox label" error errorMessage="Please accept our terms" />

Checkbox label

Please accept our terms

indeterminate

There is a Cookbook article on the use-case for indeterminate checkboxes, and how to create the below story.

label


<Checkbox label="Do you accept our terms and conditions?" />

Do you accept our terms and conditions?

optional


<Checkbox label="Checkbox label" optional />

Checkbox label (optional)

theme


<Checkbox label="Checkbox label" theme="tertiary500" />
<Checkbox label="Checkbox label" theme="secondary500" />

Checkbox label

Event Handlers


<Checkbox onChange={(event, isChecked) => {}} onBlur={() => {}} />

Responsiveness


<Checkbox
    label="Checkbox label"
    theme={{ base: 'secondary', md: 'tertiary' }}
/>

Checkbox label

Full API

Name	Type	Default
`disabled`	`boolean` If `true`, the component will be disabled and not respond to user interactions.	`false`
`error`	`boolean` If `true`, the component will have error styling set.	`false`
`errorMessage`	`string` If set, the `ErrorMessage` component will be rendered below the input with this text.
`id`	`string` The ID to be set on the checkbox.
`inputProps`	`InputHTMLAttributes<HTMLInputElement>` Optional extra props that will be applied directly to the checkbox `<input>`.
`label`	`ReactNode` The accessible label for the checkbox.	`Checkbox`
`name`	`string` The field name used on the POST request when the form is submitted.
`onBlur`	`FocusEventHandler<HTMLInputElement>` Callback fired when the checkbox loses user focus.
`onChange`	`(event: ChangeEvent<HTMLInputElement>, isChecked: boolean) => void` Callback fired each time the user checks or unchecks the checkbox. `event` The event source of the callback. `isChecked` The checked state of the checkbox.
`optional`	`boolean` Add an optional flag to the label for this field (controlled by https://coral-oe.vercel.app/?path=/docs/guides-configuration—docs#overrides-optional-indicator optionalIndicator). This should be set to true if you have set this field to be optional in your validation schema.	`false`
`checked`	`boolean` If `true`, the checkbox will be checked by default. This value should be controlled by the parent component.
`indeterminate`	`boolean` Should this Checkbox be indeterminate?
`theme`	`ResponsiveVariant<"secondary500" \| "tertiary500">` The colourway applied to this component.	`tertiary500`
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`

Design

Good to know

What is the difference between a checkbox and a radio button?

A checkbox allows you to select multiple items from a list of options, however a radio button only allows you select one option.

Why are there two colour variations?

Our primary theme is our voltage checkbox, this should be used 99% of the time. Our secondary ink variation is to be used on top of ice, commonly in payment sections.

Component breakdown

Corner radius: 2px
Border: 2px
Text: Body 2
Colour: Voltage & Ink