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 | (FormEventHandler<HTMLInputElement> & ChangeEventHandler<HTMLInputElement, HTMLInputElement>) | (FormEventHandler<...> & ChangeEventHandler<...>) | 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 | Omit<Omit<Omit<any, never> & Partial<Pick<any, never>>, "theme"> & { theme?: any; } & { as?: string | ComponentType<any>; forwardedAs?: string | ComponentType<...>; }, "ref"> | Omit<...> | 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