Radio Group (New)

Installation

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

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

Using the RadioGroup component

When setting up a Radio Group component you will need to import RadioGroupNew and RadioButtonNew separately. This makes it easier to add as many items to your RadioGroup as you need.

For example:

                                                        
                                                        
                                                            import { RadioGroupNew } from "@octopusdeploy/design-system-components";
                                                        import { RadioButtonNew} from "@octopusdeploy/design-system-components";
                                                         
                                                         <RadioGroupNew 
                                                           value={value} 
                                                           onChange={onChange} 
                                                           label="Label for Radio Group" 
                                                           description="An optional description" 
                                                        
                                                           // When using inside the expandable form sections you must set these to true.
                                                           hideLabel={true} 
                                                           hideDescription={true}
                                                        >
                                                            <RadioButtonNew value={true} label="Enabled" name="nameOfGroup" />
                                                            <RadioButtonNew value={false} label="Disabled" hasDefaultMarker={true} name="nameOfGroup" />
                                                        </RadioGroupNew>
                                                        
                                                            

Expandable form sections

When using inside an ExpandableFormSection 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 RadioGroup 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.

                                                        
                                                        
                                                            <TextField 
                                                          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., RadioGroup, etc.

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