Tonic UI
Getting StartedColor ModeColor StyleVersionsContributing
THEME
BordersBreakpointsColorsOutlinesPositionsSpacingSizesShadowsTypography
BUILDING BLOCKS
BoxControlBox
UTILITIES

Textarea

The Textarea component allows you to create a multi-line text input.

Import

Usage

EDITABLE EXAMPLE

Sizing

  • The rows and cols 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 the Textarea 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 the required attribute.
  • The resize property to set whether the Textarea is resizable, and if so, in which directions. You can set the value to none, both, horizontal, or vertical.
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

NameTypeDefaultDescription
rowsnumberSpecifies the visible number of lines in a text area.
colsnumberSpecifies the visible width of a text area.
maxLengthnumberSpecifies a maximum number of characters that is allowed to contain.
minLengthnumberSpecifies a minimum length that is considered valid.
resizestringOne of: 'none', 'both', 'horizontal', 'vertical'
variantstring'outline'The variant of the input style to use. One of: 'outline', 'filled', 'unstyled'
disabledbooleanIf true, the user cannot interact with the control. This sets aria-disabled=true and you can style this state by passing the _disabled prop.
readOnlybooleanIf true, prevents the value of the input from being edited.
isInvalidbooleanIf true, the input will indicate an error. You can style this state by passing the _invalid prop.