@tiller-ds/form-elements/FormLayout.d.ts

Form elements module of Tiller Design System

import * as React from "react";
import { CardBodyProps } from "@tiller-ds/core";
import { TokenProps } from "@tiller-ds/theme";
declare type FormLayoutProps = {
    /**
     * Content wrapped in a form layout component.
     */
    children: React.ReactNode;
    /**
     * Defines how the Form Layout is displayed.
     * Each type defines the placement of the title, content and/or Card component.
     */
    type?: "simple" | "card" | "full-width";
} & TokenProps<"FormLayout">;
declare type FormLayoutSectionProps = {
    /**
     * Title of the section (not exclusively text).
     */
    title?: React.ReactNode;
    /**
     * Subtitle of the section (not exclusively text).
     */
    subtitle?: React.ReactNode;
    /**
     * Content displayed inside the section.
     */
    children: React.ReactNode;
    /**
     * Custom container (div) className.
     */
    className?: string;
} & TokenProps<"FormLayout">;
declare type FormLayoutSectionContentProps = {
    children: React.ReactNode;
} & CardBodyProps & TokenProps<"FormLayout">;
declare type FormLayoutSectionActionsProps = {
    children: React.ReactNode;
} & TokenProps<"FormLayout">;
declare type FormLayoutFieldProps = {
    /**
     * Form layout field content (not exclusively text).
     */
    children: React.ReactNode;
    /**
     * Form layout field label (not exclusively text).
     */
    label: React.ReactNode;
    /**
     * The accessor value for the field component (for validation, fetching, etc.).
     */
    name: string;
    /**
     * Turns this field into a required field in the form. Only applies visual representation (* next to label),
     * still requires validation on frontend or backend to accompany this value if set to true.
     */
    required?: boolean;
    /**
     * Text to display when hovering over a required symbol (*).
     * Useful for bilingual purposes.
     */
    requiredLabel?: string;
};
declare function FormLayout({ children, type, ...props }: FormLayoutProps): JSX.Element;
declare namespace FormLayout {
    var Section: typeof FormLayoutSection;
    var Field: typeof FormLayoutField;
}
export declare function FormLayoutSection({ title, subtitle, children, className, ...props }: FormLayoutSectionProps): JSX.Element;
export declare namespace FormLayoutSection {
    var Content: typeof FormLayoutSectionContent;
    var Actions: typeof FormLayoutSectionActions;
}
export declare function FormLayoutSectionContent({ children, ...props }: FormLayoutSectionContentProps): JSX.Element;
export declare function FormLayoutSectionActions({ children, ...props }: FormLayoutSectionActionsProps): JSX.Element;
declare function FormLayoutField({ name, label, children, required, ...props }: FormLayoutFieldProps): JSX.Element;
export default FormLayout;