@primer/react-brand/lib/forms/FormControl/FormControl.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import { PropsWithChildren } from 'react';
import type { BaseProps } from '../../component-helpers';
import type { FormValidationStatus, FormInputSizes } from '../';
export type FormControlProps = BaseProps<HTMLElement> & {
    /**
     * Apply a decorative border to the form control.
     */
    hasBorder?: boolean;
    /**
     * Applies full width styling.
     */
    fullWidth?: boolean;
    /**
     * A unique identifier for the form control.
     * This is used to associate the form control with its associated label.
     * If an id is not provided, a unique id will be generated.
     */
    id?: string;
    /**
     * Applies required styling to the label and input.
     */
    required?: boolean;
    /**
     * Alternative sizes for inputs and labels.
     */
    size?: FormInputSizes;
    /**
     * Provides contextual validation feedback to all children, showing relevant messaging where applicable.
     */
    validationStatus?: FormValidationStatus;
};
type FormControlLabelProps = {
    htmlFor?: string;
    required?: boolean;
    showRequiredIndicator?: boolean;
    size?: FormInputSizes;
    validationStatus?: FormValidationStatus;
    visuallyHidden?: boolean;
} & BaseProps<HTMLLabelElement>;
type FormControlValidationProps = {
    children: string;
    validationStatus?: FormValidationStatus;
} & BaseProps<HTMLSpanElement>;
type FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>;
/**
 * FormControl
 * {@link https://primer.style/brand/components/FormControl/ See usage examples}.
 */
export declare const FormControl: (({ children, className, hasBorder, fullWidth, id, required, size, validationStatus, ...rest }: PropsWithChildren<FormControlProps>) => import("react/jsx-runtime").JSX.Element) & {
    Label: ({ children, className, htmlFor, required, showRequiredIndicator, size, validationStatus, visuallyHidden, ...rest }: PropsWithChildren<FormControlLabelProps>) => import("react/jsx-runtime").JSX.Element;
    Validation: ({ children, validationStatus, className, ...props }: FormControlValidationProps) => import("react/jsx-runtime").JSX.Element;
    Hint: ({ className, ...rest }: FormControlHintProps) => import("react/jsx-runtime").JSX.Element;
};
export {};