Default

Indeterminate

The indeterminate prop is only a visual clue, it does not affect the checked state of the checkbox. This is used when there is a checkbox group and the parent displays this state when not all child checkboxes are selected.

Disabled

Invalid

White

You can change the label to white for displaying on dark backgrounds.

Required

Use the required prop to add a visual indicator that the checkbox is required.

With small label

                                                
                                                import BpkCheckbox from '@skyscanner/backpack-web/bpk-component-checkbox';
                                                
                                                export default () => (
                                                  <BpkCheckbox
                                                    name="prefer-directs"
                                                    onChange={() => console.log('prefer directs changed!')}
                                                    label="Prefer directs"
                                                    checked
                                                  />
                                                );

Props