TextArea

TextArea represents a multi-line plain-text editing control.

Useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

Simple TextArea

Default value + read-only

This is an informative helper text.

Controlled TextArea

You can use the value, and onChange properties to control the behaviour of the textarea.

The value is
""

API

Learn more about the properties and the customization points.

Usage

import TextArea from "@sonnat/ui/TextArea";

//or
import { TextArea } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

TextArea Properties
Name	Type	Default	Description
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
minRows	string \| number	-	Minimum number of rows to display.
maxRows	string \| number	-	Maximum number of rows to display. (works only when `autoResize={true}`)
name	string	-	The name of the textarea.
placeholder	string	-	The `placeholder` property of the textarea.
value	string	-	The value of the textarea. The DOM API casts this to a string.
defaultValue	string	-	The default value. Use when the component is not controlled.
helperText	string	-	The helper text content.
helperIcon	node	-	The helper icon element placed before the helper text.
size	"large" \| "medium" \| "small"	"medium"	The size of the textarea.
autoResize	boolean	false	If `true`, the textarea will automatically adjust the height.
resizable	boolean	false	If `true`, the textarea will be vertically resizable.
disabled	boolean	false	If `true`, the textarea will be disabled.
readOnly	boolean	false	If `true`, the textarea will be readOnly.
focused	boolean	false	If `true`, the textarea will be focused.
autoFocus	boolean	false	If `true`, the textarea will be focused on mount.
required	boolean	false	If `true`, the textarea will be required.
hasError	boolean	false	If `true`, the textarea will indicate invalid input.
fluid	boolean	false	If `true`, the textarea will be fluid (max-width: 100%)
inputProps	object	-	The properties applied to the `textarea` element.
onChange	function	-	The callback fires when the state has changed. Signature: `function(value: string) => void`
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.