welcome-ui/dist/types/components/Field/types.d.ts

Customizable design system with react, typescript, tailwindcss and ariakit.

import { ComponentProps, HTMLAttributes } from 'react';
import { HintProps } from '../Hint/types';
import { Label } from '../Label';
export interface FieldOptions extends VariantProps {
    children: React.ReactNode;
    disabled?: boolean;
    disabledIcon?: React.ReactNode;
    hideLabel?: boolean;
    hint?: React.ReactNode;
    hintProps?: HintProps;
    /**
     * If true, the field will be displayed inline (horizontally) instead of block (vertically).
     */
    inline?: boolean;
    label: React.ReactNode;
    labelProps?: ComponentProps<typeof Label>;
    /**
     * The maximum number of characters allowed in the input field. If provided, a character count will be displayed on hint on the right side.
     */
    maxLength?: {
        count: number;
        max: number;
    };
    required?: boolean;
}
export type FieldState = {
    disabled?: boolean;
    /**
     * Function that provides the necessary accessibility props to the input element.
     */
    getInputProps: FieldGetInputPropsFunction;
    hintID: string;
    labelID: string;
    required?: boolean;
    variant?: FieldStateVariant;
};
export type FieldStateVariant = 'danger' | 'success' | 'warning';
type FieldGetInputPropsFunction = <T extends HTMLAttributes<HTMLElement>>(ownProps?: T) => T;
type VariantProps = {
    error?: React.ReactNode;
    success?: React.ReactNode;
    warning?: React.ReactNode;
};
export {};