soda-material
Version:
A React(>=18) component library that may follow [Material Design 3](https://m3.material.io/components) (a.k.a. Material You)
49 lines (48 loc) • 1.96 kB
TypeScript
/// <reference types="react" />
import './text-field.scss';
import { type ReactRef } from '@/utils/react-ref';
/**
* @specs https://m3.material.io/components/text-fields/specs
*/
export declare const TextField: import("react").ForwardRefExoticComponent<{
leadingIcon?: React.ReactNode;
trailingIcon?: React.ReactNode;
labelText?: React.ReactNode;
supportingText?: React.ReactNode;
value?: string | number | undefined;
onChange?: ((text: string) => void) | undefined;
readonly?: boolean | undefined;
disabled?: boolean | undefined;
error?: boolean | undefined;
/**
* Textarea will ignore this and only show as filled style
* @default filled
*/
sd?: "filled" | "outlined" | undefined;
/**
* Set to true to change the internal element to `<textarea>`
*/
textarea?: boolean | undefined;
/**
* Rows only for textarea
* @default 2
*/
rows?: number | undefined;
placeholder?: string | undefined;
/**
* For access the internal input element
*
* [warn]: (for typescript user) use `const ref = useRef<HTMLInputElement | undefined>()` to create a MutableRefObject
*/
inputRef?: ReactRef<HTMLInputElement | undefined> | undefined;
/**
* For access the internal textarea element
*
* [warn]: (for typescript user) use `const ref = useRef<HTMLInputElement | undefined>()` to create a MutableRefObject
*/
textareaRef?: ReactRef<HTMLTextAreaElement | undefined> | undefined;
/**
* For internal use, control if focused is shown
*/
'data-sd-focus'?: boolean | undefined;
} & Omit<import("react").HTMLProps<HTMLElement>, "as" | "ref" | "disabled" | "placeholder" | "rows" | "value" | "onChange" | "textarea" | "trailingIcon" | "sd" | "error" | "leadingIcon" | "labelText" | "supportingText" | "readonly" | "inputRef" | "textareaRef" | "data-sd-focus"> & import("react").RefAttributes<HTMLDivElement>>;