Checkbox (New)

Installation

import { CheckboxNew } from "@octopusdeploy/design-system-components"

import { CheckboxGroupNew } from "@octopusdeploy/design-system-components"

Using the Checkbox component

There are two ways to use a Checkbox that impacts how you use the checkbox component:

• A singular checkbox
• As a group of checkboxes

Singular Checkbox

If you are using a singular checkbox you can import the CheckboxNew component on it’s own, it will handle rendering a single checkbox.

For Example:

                                                        
                                                        
                                                            import { CheckboxNew } from "@octopusdeploy/design-system-components";
                                                        
                                                        <CheckboxNew  
                                                          label={label} 
                                                          value={value} 
                                                          onChange={onChange} 
                                                          disabled={isDisabled}
                                                        />
                                                        
                                                            

Group of Checkboxes

When setting up a group of Checkbox’s import CheckboxNew and CheckboxGroupNew separately. Here you set CheckboxGroupNew as the parent and add as many checkboxes as children as you need with CheckboxNew. This makes managing children easier when in a group (Similar to the RadioGroup) component.

When using checkboxes in a group, pass the group’s name to CheckboxGroupNew (see below). This propagates the name to each checkbox, eliminating the need to repeat it. If desired, you may still set a name on individual checkboxes.

For example:

                                                        
                                                        
                                                            import { CheckboxNew } from "@octopusdeploy/design-system-components";
                                                        import { CheckboxGroupNew} from "@octopusdeploy/design-system-components";
                                                         
                                                         <CheckboxGroupNew 
                                                           value={value} 
                                                           onChange={onChange} 
                                                           label="Label for Checkbox" 
                                                           description="An optional description" 
                                                           name="nameOfGroup"
                                                        
                                                           // When using inside the expandable form sections you can hide the additional label and description
                                                           hideLabel={true} 
                                                           hideDescription={true}
                                                        >
                                                            <CheckboxNew value="option1" label="Option 1" />
                                                            <CheckboxNew value="option2" label="Option 2" hasDefaultMarker={true} />
                                                        </CheckboxGroupNew>
                                                        
                                                            

Expandable form sections

When using inside an ExpandableFormSection you can enable the two boolean props: hideLabel and hideDescription. This visually hides the label and description and instead uses the ExpandableFormSection label and description, while ensuring it is still accessible for assistive technology.

Moving your label and description into a const and sharing them between the ExpandableFormSection and CheckboxNew is encouraged to ensure consistency.

Form Description

Form descriptions allow you to pass in a string, with the option to include an inline code descriptor or link. It has a particular format to allow for flexibility. You can include as many links or code descriptors as you need.

For example:

                                                        
                                                        
                                                             descriptionText`Set ${descriptionCode("itemEnabled")} to true or see our ${descriptionLink("guide", "/docs/guide")} for more details.`,
                                                        
                                                            

The above code will render the following:

Adding a Popover to the label

This is used to display a Popover with more content explaining the context of a field. It should only be used when the Helper text is not sufficient.

To include this you can pass the PopoverBasicHelp component to the popover prop e.g.

                                                        
                                                        
                                                            <CheckboxNew 
                                                          label="With Popover"
                                                          value="Popover"
                                                          popover={<PopoverBasicHelp placement="right-start" description="A popover" />}
                                                          onChange={handleChange} 
                                                        >
                                                        ...
                                                        
                                                            

Code Sub-components

Sub-components compose the Form components in the Design System. However, they are not exposed via the design system package and cannot be used on their own. Instead, use the packaged components we ship, e.g., CheckboxNew, etc.

Should you require changes to the sub-components, please reach out in #team-frontend-foundations-requests or follow the Contribution guidelines.

Examples

Indeterminate State

An indeterminate state might be used when you have a “Select All” checkbox but you unselect some of the options, leaving the checkbox in an indeterminate or “mixed” state.

Singular Checkbox

A checkbox can be used as a Singular checkbox on it’s own without the need for the group wrapper.