@workday/canvas-kit-react/dist/commonjs/form-field/lib/FormField.d.ts

The parent module that contains all Workday Canvas Kit React components

import React from 'react';
import { GrowthBehavior } from '@workday/canvas-kit-react/common';
import { FlexProps } from '@workday/canvas-kit-react/layout';
export interface FormFieldProps 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' | 'horizontal';
    children: React.ReactNode;
}
/**
 * Use `FormField` to wrap input components to make them accessible. You can customize the field
 * by passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input` through the `as` prop.
 *
 * ```tsx
 * <FormField>
 *    <FormField.Label>First Name</FormField.Label>
 *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
 *  </FormField>
 * ```
 *
 * @stencil formFieldStencil
 */
export declare const FormField: import("@workday/canvas-kit-react/common").ElementComponentM<"div", FormFieldProps & Partial<{
    error: "error" | "alert" | undefined;
    id: string;
    isRequired: boolean;
    orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
}> & {} & {}, {
    state: {
        id: string;
        error: "error" | "alert" | undefined;
        isRequired: boolean;
        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
    };
    events: {};
}> & {
    /**
     * `FormField.Input` will render any `inputs` passed to it via the `as` prop, including `TextInput`, `Select`, `Switch`, `TextArea`, `RadioGroup` or any custom input.
     * `FromField.Input` will be associated with `FormField.Label` and `FormField.Hint` by a generated `id`. You can customize this `id` by passing `id` to `FormField`.
     *
     * **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
     *  <FormField id='my-unique-id'>
     *    <FormField.Label>My Label Text</FormField.Label>
     *    <FormField.Input as={TextInput} onChange={(e) => console.log(e)} />
     *  <FormField>
     * ```
     */
    Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps, {
        state: {
            id: string;
            error: "error" | "alert" | undefined;
            isRequired: boolean;
            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
        };
        events: {};
    }>;
    /**
     * `FormField.Label` will render a `label` element that has a matching `id` to the `FormField.Input`.
     *
     * ```tsx
     * <FormField>
     *    <FormField.Label>First Name</FormField.Label>
     *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
     *  </FormField>
     * ```
     *
     * @stencil formFieldLabelStencil
     */
    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("./FormFieldLabel").FormFieldLabelProps, {
        state: {
            id: string;
            error: "error" | "alert" | undefined;
            isRequired: boolean;
            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
        };
        events: {};
    }>;
    /**
     * `FormField.Hint` will render any additional information you want to provide to the `FormField.Input`. If you
     * set the `orientation` prop to `horizontal` you should use `FormField.Field` to properly align the hint with your `FormField.Input`.
     *
     * ```tsx
     * <FormField>
     *    <FormField.Label>First Name</FormField.Label>
     *    <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
     *    <FormField.Hint>This is your hint text</FormField.Hint>
     *  </FormField>
     * ```
     *
     * @stencil formFieldHintStencil
     */
    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("../..").TextProps, {
        state: {
            id: string;
            error: "error" | "alert" | undefined;
            isRequired: boolean;
            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
        };
        events: {};
    }>;
    /**
     * `FormField.Field` allows you to properly center `FormField.Label` when the `orientation` is set to `horizontal` and there is hint text..
     *
     * ```tsx
     * <FormField orientation="horizontalStart">
     *    <FormField.Label>First Name</FormField.Label>
     *    <FormField.Container>
     *      <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
     *      <FormField.Hint>This is your hint text</FormField.Hint>
     *    </FormField.Container>
     *  </FormField>
     * ```
     *
     * @stencil formFieldContainerStencil
     * @deprecated `FormField.Container` is deprecated and will be removed in a future major version. Please use `FormField.Field` to always wrap `FormField.Input` and `FormField.Hint` to always ensure correct label and input alignment.
     */
    Container: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("@workday/canvas-kit-styling").CSProps, {
        state: {
            id: string;
            error: "error" | "alert" | undefined;
            isRequired: boolean;
            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
        };
        events: {};
    }>;
    /**
     * `FormField.Field` allows you to customize container alignment and styles when wrapping your input and hint text.
     * ```tsx
     * <FormField orientation="horizontal">
     *    <FormField.Label>First Name</FormField.Label>
     *    <FormField.Field>
     *      <FormField.Input as={TextInput} value={value} onChange={(e) => console.log(e)} />
     *      <FormField.Hint>This is your hint text</FormField.Hint>
     *    </FormField.Field>
     *  </FormField>
     * ```
     */
    Field: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("@workday/canvas-kit-styling").CSProps, {
        state: {
            id: string;
            error: "error" | "alert" | undefined;
            isRequired: boolean;
            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
        };
        events: {};
    }>;
};
//# sourceMappingURL=FormField.d.ts.map