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

Form elements module of Tiller Design System

import * as React from "react";
import { ComponentTokens } from "@tiller-ds/theme";
export declare type FieldProps = {
    /**
     * Field content (not exclusively text).
     */
    children: React.ReactNode;
    /**
     * Optional styling for the field container.
     */
    containerClassName?: string;
    /**
     * Value passed through from validation indicating to display the error on the component.
     */
    error?: React.ReactNode;
    /**
     * Optional styling for the field component.
     */
    fieldClassName?: string;
    /**
     * The help text displayed below the field and content defined with addonBelow prop (not exclusively text).
     */
    help?: React.ReactNode;
    /**
     * Unique identifier passed onto the component.
     */
    id?: string;
    /**
     * Represents the label above the field.
     */
    label?: React.ReactNode;
    /**
     * The accessor value for the field component (for validation, fetching, etc.).
     */
    name?: string;
    /**
     * Optional component displayed under the field component and above the help and error.
     * Useful for rendering arbitrary items under the field component.
     */
    addonBelow?: React.ReactNode;
    /**
     * 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;
    /**
     * Tooltip icon and text (on icon hover) displayed on the right of the label.
     */
    tooltip?: React.ReactNode;
    /**
     * A unique identifier for testing purposes.
     * This identifier can be used in testing frameworks like Jest or Cypress to locate specific elements for testing.
     * It helps ensure that UI components are behaving as expected across different scenarios.
     * @type {string}
     * @example
     * // Usage:
     * <MyComponent data-testid="my-component" />
     * // In tests:
     * getByTestId('my-component');
     */
    "data-testid"?: string;
} & InputTokensProps;
declare type InputTokensProps = {
    tokens?: ComponentTokens<"Input">;
};
export declare type FieldLabelProps = {
    id?: string;
    /**
     * Custom classes for the container.
     * Overrides conflicting default styles, if any.
     *
     * The provided `className` is processed using `tailwind-merge` to eliminate redundant or conflicting Tailwind classes.
     */
    className?: string;
    label?: React.ReactNode;
    tooltip?: React.ReactNode;
    required?: boolean;
    requiredLabel?: string;
} & FieldLabelTokensProps;
declare type FieldLabelTokensProps = {
    fieldTokens?: ComponentTokens<"Field">;
    inputTokens?: ComponentTokens<"Input">;
};
export default function Field({ id, label, help, tooltip, required, error, containerClassName, fieldClassName, children, addonBelow, ...props }: FieldProps): JSX.Element;
export declare function FieldLabel({ id, label, required, tooltip, className, ...props }: FieldLabelProps): JSX.Element;
export {};