Basic usage
Text areas allow users to input and edit a longer amount of custom text than a text field. Text areas often have input requirements indicated by their label, ghost text, and/or error state.
Error
Props
Textarea| Name | Type | Description |
size | "small" | "medium" | "large" | Size of input |
disabled | boolean | disabled input |
placeholder | string | Default browser placeholder value will be used if no label is provided |
readOnly | boolean | read only input |
value | string | (string & readonly string[]) | Value for input |
onChange | (((event: FormEvent<HTMLInputElement>) => void) & ((event: ChangeEvent<HTMLInputElement>) => void)) | (((event: FormEvent<HTMLInputElement>) => void) & ((event: ChangeEvent<...>) => void)) | Callback fired when the value is changed |
defaultValue | string | (string & readonly string[]) | Value for uncontrolled input |
labelText | string | Ghost/floating label. If both placeholder and label are provided, label will be in `docked` mode |
helperText | string | Additional text to help guide user |
error | boolean | Error / Danger mode |
placeholderVariant | "docked" | "animated" | "static" | animated, docked, static |
isMultiline | boolean | Render textarea if true |
elementBefore | ReactNode | 16x16 element to render before input cursor. Most cases should be an icon. Does not play nice with labelText / ghost label |
elementAfter | ReactNode | 16x16 element to render after cursor. Most cases should be an icon |
secondElementAfter | ReactNode | A second 16x16 element to render after cursor. Most cases should be an icon |
isRequired | boolean | required input |
requiredIndicator | string | required indicator, default is * |
wrapperProps | Pick<Pick<Pick<any, string | number | symbol> & Partial<Pick<any, never>>, string | number | symbol> & { theme?: any; } & { as?: string | ComponentClass<any, any> | FunctionComponent<...>; forwardedAs?: string | ... 1 more ... | FunctionComponent<...>; }, string | ... 1 more ... | symbol> | Pick<...> | box props to be passed on the input wrapper (e.g. to set external margins) |
rows | number | Number of rows to show without scrollbar |
resize | "none" | "both" | "horizontal" | "vertical" | Resize knob |
Autogrow
Not available yet in houzz-ui