@octopusdeploy/design-system-components/dist/src/components/Form/RadioGroup/RadioGroupNew.d.ts

The design systems component library.

import * as React from "react";
import type { PopoverBasicHelpProps } from "../../Popover/PopoverBasicHelp";
import type { DescriptionContent } from "../utils/descriptionWithLinks";
export interface RadioGroupNewContextValue<T extends string | boolean = string | boolean> {
    value: T;
    onChange: (value: T) => void;
    name?: string;
    disabled?: boolean;
    validationMessage?: string;
    groupId: string;
}
export declare const RadioGroupContext: React.Context<RadioGroupNewContextValue<string | boolean> | undefined>;
export interface RadioGroupNewProps<T extends string | boolean> {
    /**
     * The label for the radio group.
     */
    label: string;
    /**
     * Optional description paragraph to display under the label.
     * Can be either:
     * - A simple string (basic usage)
     * - A DescriptionContent array created with descriptionText`...` for rich content with links and code
     * @example
     * // Simple string
     * description="This is a basic description."
     *
     * // Rich content with links and code
     * description={descriptionText`Set ${descriptionCode("isVisible")} prop or see ${descriptionLink("docs", "/docs")}.`}
     */
    description?: string | DescriptionContent;
    /**
     * PopoverBasicHelp component to display additional help information
     * displays the Information icon next to the group label
     */
    popover?: React.ReactElement<PopoverBasicHelpProps>;
    /**
     * If true displays the (optional) text next to the group label
     */
    hasOptionalMarker?: boolean;
    /**
     * If true displays the (required) text next to the group label
     */
    hasRequiredMarker?: boolean;
    /**
     * Disables the radio group
     */
    disabled?: boolean;
    /**
     * The children of the radio group (one or more RadioButtonNew components).
     */
    children: React.ReactNode;
    /**
     * Validation message to display.
     */
    validationMessage?: string;
    /**
     * The value of the form field.
     */
    value: T;
    /**
     * The action to perform when the form control field is changed.
     */
    onChange: (newValue: T) => void;
    /**
     * These props hide the label and description visually and should be used when the radio group
     * is placed inside an expandable form section. Screen readers will still
     * announce them, but they won’t be shown to users, since the content is
     * already displayed within the expandable section.
     *
     * Do not use these props if the radio group is outside an expandable form section.
     * Instead you should ensure the label and optional description is displayed.
     *
     * These props can be removed when expandable form sections are removed.
     */
    hideLabel?: boolean;
    hideDescription?: boolean;
}
/**
 * RadioGroup component that supports rich descriptions with inline links.
 *
 * @example
 * ```tsx
 * import { RadioGroupNew, RadioButtonNew, descriptionText, descriptionLink } from '@octopusdeploy/design-system-components';
 *
 *     <RadioGroupNew
 *       label="Label for radio group"
 *       description={descriptionText`Add a description with a ${descriptionLink("link", "/link")}.`}
 *       value={value}
 *       onChange={setValue}
 *     >
 *       <RadioButtonNew value="option1" label="Automatic" name="deployment" />
 *       <RadioButtonNew value="option2" label="Manual" name="deployment" />
 *     </RadioGroupNew>
 *   );
 * };
 * ```
 */
export declare function RadioGroupNew<T extends string | boolean>({ label, description, children, validationMessage, hideLabel, hideDescription, hasOptionalMarker, hasRequiredMarker, popover, disabled, onChange, value, }: RadioGroupNewProps<T>): import("react/jsx-runtime").JSX.Element;