UNPKG

@payfit/unity-components

Version:

129 lines (128 loc) 3.4 kB
import { TextAreaProps as AriaTextAreaProps } from 'react-aria-components/TextArea'; export declare const textArea: import('tailwind-variants').TVReturnType<{ isInvalid: { true: { base: string; inputWrapper: string; input: string; state: string; }; }; isReadOnly: { true: { base: string; inputWrapper: string; input: string; }; }; isDisabled: { true: { base: string; inputWrapper: string; input: string; }; }; }, { base: string; inputWrapper: string; input: string; state: string; resizeHandle: string; }, undefined, { isInvalid: { true: { base: string; inputWrapper: string; input: string; state: string; }; }; isReadOnly: { true: { base: string; inputWrapper: string; input: string; }; }; isDisabled: { true: { base: string; inputWrapper: string; input: string; }; }; }, { base: string; inputWrapper: string; input: string; state: string; resizeHandle: string; }, import('tailwind-variants').TVReturnType<{ isInvalid: { true: { base: string; inputWrapper: string; input: string; state: string; }; }; isReadOnly: { true: { base: string; inputWrapper: string; input: string; }; }; isDisabled: { true: { base: string; inputWrapper: string; input: string; }; }; }, { base: string; inputWrapper: string; input: string; state: string; resizeHandle: string; }, undefined, unknown, unknown, undefined>>; export interface TextAreaProps extends AriaTextAreaProps { /** Whether the field is in an invalid state */ isInvalid?: boolean; /** Whether the field is in a loading state */ isLoading?: boolean; /** Whether the field is disabled */ isDisabled?: boolean; /** Whether the field is read-only */ isReadOnly?: boolean; /** Whether the textarea is resizable */ isResizable?: boolean; } /** * The `TextArea` component displays a styled, single HTML `<textarea>` field that follows the Unity design system language. It supports multiple states out of the box and can be used as a controlled or uncontrolled component. It is also compatible with the `Form` and `FormField` component as a form control. * @param {TextAreaProps} props - Regular props from the `<textarea>` HTML element, plus state-related props * @see {@link TextAreaProps} for all available props * @example * ```tsx * import { Input } from '@payfit/unity-components' * * function Example() { * const [value, setValue] = useState() * * const handleTextChange = (e) => { * setValue(e.target.value) * } * * return ( * <TextArea * id="my-text-area" * isResizable cols={50} rows={5} onChange={handleTextChange} * > * {value} * </TextArea> * } * ``` */ declare const TextArea: import('react').ForwardRefExoticComponent<TextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>; export { TextArea };