Checkbox

Checkboxes allow the user to select one or more items from a set.

Default

Storybook failed to load.

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.

Storybook failed to load.

Disabled

Storybook failed to load.

Invalid

Storybook failed to load.

White

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

Storybook failed to load.

Required

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

Storybook failed to load.

With small label

Storybook failed to load.

bpk-component-checkbox

Backpack checkbox component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                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

Check out the full list of props on Skyscanner's design system documentation website.

Props

Storybook failed to load.