@octopusdeploy/design-system-components/dist/src/components/FormSection/FormSection.d.ts

The design systems component library.

import type { ReactElement, ReactNode } from "react";
import type { Badge, BadgeProps } from "../Badge";
interface FormSectionSharedProps {
    /**
     * The section title shown in the legend bar. Use sentence case and keep it concise to avoid wrapping.
     */
    title: string;
    /**
     * Inline marker rendered next to the title. Use only when ALL fields in the section share that status.
     */
    marker?: "optional" | "required" | "prefilled";
    /**
     * Optional `Badge` rendered to the right of the title. Typed to `Badge` so the legend doesn't contain
     * a nested interactive element when the section is itself a toggle button.
     */
    badge?: ReactElement<BadgeProps, typeof Badge>;
    /**
     * The form fields and supporting content rendered below the legend.
     */
    children: ReactNode;
}
interface FormSectionStaticProps extends FormSectionSharedProps {
    /**
     * Renders a static section without a toggle. The content is always visible.
     */
    isInteractive?: false;
}
interface FormSectionInteractiveProps extends FormSectionSharedProps {
    /**
     * Renders an interactive collapsible section with a chevron toggle in the legend.
     */
    isInteractive: true;
    /**
     * Controlled open state for the interactive section.
     */
    isOpen: boolean;
    /**
     * Called with the next open value when the user toggles the legend.
     */
    onToggle: (isOpen: boolean) => void;
}
export type FormSectionProps = FormSectionStaticProps | FormSectionInteractiveProps;
/**
 * Groups related form fields under a distinctive legend bar.
 * @remarks Rollout currently paused — do not use in new code until further notice.
 */
export declare function FormSection(props: FormSectionProps): import("react/jsx-runtime").JSX.Element;
export {};