import React from 'react';
import { GrowthBehavior } from '@workday/canvas-kit-react/common';
import { FlexProps } from '@workday/canvas-kit-react/layout';
export interface FormFieldGroupProps extends FlexProps, GrowthBehavior {
    /**
     * The direction the child elements should stack. In v13, `horizontal` will be removed. Please use `horizontalStart` or `horizontalEnd` for horizontal alignment.
     * @default vertical
     */
    orientation?: 'vertical' | 'horizontalStart' | 'horizontalEnd';
    children: React.ReactNode;
}
/**
 * Use `FormFieldGroup` to wrap a group of inputs to make them accessible.
 *
 * ```tsx
 * <FormFieldGroup>
 *    <FormFieldGroup.Label>Choose a Pet</FormFieldGroup.Label>
 *    <FormFiledGroup.Field>
 *      <FormFieldGroup.List as={RadioGroup} />
 *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
 *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
 *      </FormFieldGroup.List>
 *    </FormFieldGroup.Field>
 * </FormFieldGroup>
 * ```
 *
 * @stencil formFieldStencil
 */
export declare const FormFieldGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", FormFieldGroupProps & Partial<{
    error: "error" | "caution" | undefined;
    id: string;
    isRequired: boolean;
    orientation: "vertical" | "horizontalEnd" | "horizontalStart";
}> & {} & {}, {
    state: {
        id: string;
        error: "error" | "caution" | undefined;
        isRequired: boolean;
        orientation: "vertical" | "horizontalEnd" | "horizontalStart";
    };
    events: {};
}> & {
    /**
     * `FormFieldGroup.Input` will render any `inputs` passed to it via the `as` prop. Use this component with checkboxes or radio inputs.
     * `FormFieldGroup.Input` will apply `aria-invalid` when there is an error on `FromFieldGroup` or `aria-describedby` when an `id` is added on the `FormFieldGroup`.
     *
     * **Note: If you pass in a custom input that is *not* as Canvas Kit input, you will have to handle the `error` prop, validation and styling. For a custom approach, reference our Custom storybook example.**
     *
     * ```tsx
     * <FormFieldGroup>
     *    <FormField.Label>Choose a Pet</FormField.Label>
     *    <FormFieldGroup.List as={RadioGroup} />
     *      <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
     *      <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
     *    </FormFieldGroup.List>
     * </FormFieldGroup>
     * ```
     */
    Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("./FormFieldGroupInput").FormFieldGroupInputProps, {
        state: {
            id: string;
            error: "error" | "caution" | undefined;
            isRequired: boolean;
            orientation: "vertical" | "horizontalEnd" | "horizontalStart";
        };
        events: {};
    }>;
    /**
     * `FormFieldGroup.Label` this element labels the contents of the group of inputs..
     *
     * ```tsx
     * <FormFieldGroup>
     *    <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
     *    //...
     *  </FormFieldGroup>
     * ```
     *
     * @stencil formFieldLabelStencil
     */
    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./FormFieldGroupLabel").FormFieldGroupLabelProps, {
        state: {
            id: string;
            error: "error" | "caution" | undefined;
            isRequired: boolean;
            orientation: "vertical" | "horizontalEnd" | "horizontalStart";
        };
        events: {};
    }>;
    /**
     * `FormFieldGroup.List` will render a `div`. This element is used to apply the visual error states around the group of inputs. It's contents will be your inputs.
     */
    List: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./FormFieldGroupList").FormFieldGroupListProps, {
        state: {
            id: string;
            error: "error" | "caution" | undefined;
            isRequired: boolean;
            orientation: "vertical" | "horizontalEnd" | "horizontalStart";
        };
        events: {};
    }>;
    /**
     * `FormFieldGroup.Hint` will render any additional information you want to provide to the `FormFieldGroup`.
     *
     * ```tsx
     * <FormFieldGroup>
     *    <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
     *    <FormFieldGroup.List>
     *      //...
     *    <FormFieldGroup.List>
     *    <FormField.Hint>This is your hint text</FormField.Hint>
     *  </FormFieldGroup>
     * ```
     *
     * @stencil formFieldHintStencil
     */
    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("../..").TextProps, {
        state: {
            id: string;
            error: "error" | "caution" | undefined;
            isRequired: boolean;
            orientation: "vertical" | "horizontalEnd" | "horizontalStart";
        };
        events: {};
    }>;
    /**
     * `FormFieldGroup.Field` allows you to properly align the legend to the group of inputs.
     *
     * ```tsx
     * <FormFieldGroup orientation="horizontalStart">
     *    <FormFieldGroup.Label>Choose a pet</FormFieldGroup.Label>
     *    <FormFieldGroup.Field>
     *      <FormFieldGroup.List>
     *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='dog'>Dog</FormFieldGroup.Input>
     *        <FromFieldGroup.Input as={RadioGroup.RadioButton} value='cat'>Cat</FormFieldGroup.Input>
     *      </FormFieldGroup.List>
     *      <FormFieldGroup.Hint>This is your hint text</FormField.Hint>
     *    </FormFieldGroup.Field>
     *  </FormFieldGroup>
     * ```
     *
     */
    Field: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("@workday/canvas-kit-styling").CSProps, {
        state: {
            id: string;
            error: "error" | "caution" | undefined;
            isRequired: boolean;
            orientation: "vertical" | "horizontalEnd" | "horizontalStart";
        };
        events: {};
    }>;
};
//# sourceMappingURL=FormFieldGroup.d.ts.map