reablocks/dist/layout/Field/Field.d.ts

Component library for React

import { default as React, FC, ReactNode } from 'react';
import { FieldTheme } from './FieldTheme';
export interface FieldProps extends React.HTMLAttributes<HTMLElement> {
    /**
     * Label to display on the field.
     */
    label?: React.ReactNode | string;
    /**
     * Disable field bottom margin.
     */
    disableMargin?: boolean;
    /**
     * Whether to show the required indicator next to the label.
     */
    required?: boolean;
    /**
     * Content to render as the required indicator. Defaults to `*`.
     * The indicator is decorative (`aria-hidden`); set `required`/`aria-required`
     * on the input control for screen readers.
     */
    requiredIndicator?: ReactNode;
    /**
     * Visually-hidden text announced by assistive tech alongside the required
     * indicator. Defaults to `'required'`. Pass `''` to opt out (e.g. when the
     * input already carries `aria-required`), or a localized string.
     */
    requiredAnnouncement?: string;
    /**
     * Sets the label's `htmlFor`. Pair with a matching `id` on the child form
     * control to associate them. When omitted, no `htmlFor` is rendered.
     */
    htmlFor?: string;
    /**
     * Children to render.
     */
    children?: ReactNode;
    /**
     * Additional classname to apply to the label.
     */
    labelClassName?: string;
    /**
     * Additional classname to apply to the field.
     */
    className?: string;
    /**
     * Direction of the field.
     * @default 'vertical'
     */
    direction?: 'vertical' | 'horizontal';
    /**
     * Alignment of the label.
     * @default 'start'
     */
    alignment?: 'start' | 'center' | 'end';
    /**
     * Event when the label is clicked.
     */
    onTitleClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
    /**
     * Hint text displayed below the input. Hidden when error message is shown.
     */
    hint?: React.ReactNode;
    /**
     * Error state or message. When `true`, applies error styling.
     * When a string or ReactNode, renders the error message below the input.
     */
    error?: boolean | React.ReactNode;
    /**
     * Theme for the Field.
     */
    theme?: FieldTheme;
}
export declare const Field: FC<FieldProps>;