@octopusdeploy/design-system-components/dist/src/components/Form/CheckboxNew/CheckboxGroupNew.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 CheckboxGroupNewContextValue<T extends string | boolean = string | boolean> {
    value: T | T[];
    onChange: (value: T | T[]) => void;
    disabled?: boolean;
    validationMessage?: string;
    groupId: string;
    name?: string;
}
export declare const CheckboxGroupContext: React.Context<CheckboxGroupNewContextValue<string | boolean> | undefined>;
export interface CheckboxNewGroupProps<T extends string | boolean = string | boolean> {
    /**
     * The label text to display for the checkbox 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;
    /**
     * The current value of the checkbox group as an array of selected values
     */
    value?: T[];
    /**
     * Callback function called when the checkbox group value changes
     * @param newValue - The new array of selected values
     */
    onChange?: (newValue: T[]) => void;
    /**
     * The checkbox components to render within this group (one or more CheckboxNew components)
     */
    children: React.ReactNode;
    /**
     * The name of the checkbox group, this is passed through to the individual checkboxes if no name is provided on the checkbox.
     */
    name?: string;
    /**
     * 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 checkbox group or individual checkbox
     */
    disabled?: boolean;
    /**
     * Validation message to display.
     */
    validationMessage?: string;
    /**
     * These props hide the label and description visually and should be used when the checkbox 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 checkbox 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;
}
export declare function CheckboxGroupNew<T extends string | boolean>(props: CheckboxNewGroupProps<T>): import("react/jsx-runtime").JSX.Element;