Textarea
Renders textarea with optional autosize variant
Import
Source
Docs
Package
Usage
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
Autosize
Autosize textarea uses react-textarea-autosize package.
Textarea height will grow until maxRows
are reached or indefinitely if maxRows
not set.
Controlled
Disabled state
Invalid state and error
Comment should not include bad words
Get input ref
Accessibility
Provide aria-label
in case you use component without label for screen reader support:
Textarea component props
Name | Type | Description |
---|---|---|
autosize | boolean | If true textarea will grow with content until maxRows are reached |
description | ReactNode | Input description, displayed after label |
descriptionProps | Record<string, any> | Props spread to description element |
disabled | boolean | Disabled input state |
error | ReactNode | Displays error message after input |
errorProps | Record<string, any> | Props spread to error element |
icon | ReactNode | Adds icon on the left side of input |
iconWidth | Width<string | number> | Width of icon section |
id | string | Id is used to bind input and label, if not passed unique id will be generated for each input |
inputContainer | (children: ReactNode) => ReactNode | Input container component, defaults to React.Fragment |
inputWrapperOrder | ("input" | "label" | "error" | "description")[] | Controls order of the Input.Wrapper elements |
label | ReactNode | Input label, displayed before input |
labelProps | Record<string, any> | Props spread to label element |
maxRows | number | Defines maxRows in autosize variant, not applicable to regular variant |
minRows | number | Defined minRows in autosize variant and rows in regular variant |
placeholder | string | |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
required | boolean | Adds required attribute to the input and red asterisk on the right side of label |
rightSection | ReactNode | Right section of input, similar to icon but on the right |
rightSectionProps | Record<string, any> | Props spread to rightSection div element |
rightSectionWidth | Width<string | number> | Width of right section, is used to calculate input padding-right |
size | "xs" | "sm" | "md" | "lg" | "xl" | Input size |
variant | Variants<"unstyled" | "default" | "filled"> | Defines input appearance, defaults to default in light color scheme and filled in dark |
withAsterisk | boolean | Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input |
wrapperProps | Record<string, any> | Props passed to root element |
Textarea component Styles API
Name | Static selector | Description |
---|---|---|
wrapper | .asuikit-Textarea-wrapper | Root Input element |
icon | .asuikit-Textarea-icon | Input icon wrapper on the left side of the input, controlled by icon prop |
input | .asuikit-Textarea-input | Main input element |
rightSection | .asuikit-Textarea-rightSection | Input right section, controlled by rightSection prop |
root | .asuikit-Textarea-root | Root element |
label | .asuikit-Textarea-label | Label element styles, defined by label prop |
error | .asuikit-Textarea-error | Error element styles, defined by error prop |
description | .asuikit-Textarea-description | Description element styles, defined by description prop |
required | .asuikit-Textarea-required | Required asterisk element styles, defined by required prop |