Textarea
The Textarea
component allows you to create a multi-line text input.
Import
Usage
EDITABLE EXAMPLE
Sizing
- The
rows
andcols
properties allow you to specify an exact size for the<Textarea>
to take. Setting these is a good idea for consistency, as browser defaults can differ. - The
maxLength
property specifies a maximum number of characters that theTextarea
is allowed to contain. - The
minLength
property specifies a minimum length that is considered valid.Textarea
will not submit (and is invalid) if it is empty, using therequired
attribute. - The
resize
property to set whether theTextarea
is resizable, and if so, in which directions. You can set the value tonone
,both
,horizontal
, orvertical
.
EDITABLE EXAMPLE
Variants
The Textarea
component comes in 3 variants: outline
, filled
, and unstyled
. Pass the variant
prop and set it to either of these values.
outline
EDITABLE EXAMPLE
filled
EDITABLE EXAMPLE
unstyled
EDITABLE EXAMPLE
Attributes
General form input attributes are supported, such as disabled
, readOnly
, required
, etc.
disabled
EDITABLE EXAMPLE
readOnly
EDITABLE EXAMPLE
required
EDITABLE EXAMPLE
Validation
Use the isInvalid
attribute to indicate that the value entered into an input field does not conform to the format expected by the application. isInvalid
can also be used to indicate that a required field has not been filled in.
Set isInvalid
to true
on the fields that have failed validation, otherwise set it to false
if no errors detected.
EDITABLE EXAMPLE
Props
Name | Type | Default | Description |
---|---|---|---|
rows | number | Specifies the visible number of lines in a text area. | |
cols | number | Specifies the visible width of a text area. | |
maxLength | number | Specifies a maximum number of characters that is allowed to contain. | |
minLength | number | Specifies a minimum length that is considered valid. | |
resize | string | One of: 'none' , 'both' , 'horizontal' , 'vertical' | |
variant | string | 'outline' | The variant of the input style to use. One of: 'outline' , 'filled' , 'unstyled' |
disabled | boolean | If true , the user cannot interact with the control. This sets aria-disabled=true and you can style this state by passing the _disabled prop. | |
readOnly | boolean | If true , prevents the value of the input from being edited. | |
isInvalid | boolean | If true , the input will indicate an error. You can style this state by passing the _invalid prop. |