Components

Textarea

Used to enter long text input which spans over multiple lines

Selected Theme

Select brand or tribe name to preview style

Default

Usage

Textarea allow user input. The border should light up simply and clearly indicating which field the user is currently editing.

import { Textarea } from 'legion-ui';

Variant

Legion-ui have five variant of textarea

Basic

Here’s the default usage of Textarea with placeholder attribute set.

<Textarea placeholder="Placeholder" />

you can costumize textarea with normal , success and error.

<Textarea placeholder="Normal" />
<Textarea placeholder="Success" variant="success" />
<Textarea placeholder="Error" variant="error" />

Label

Add a label for each field to make it easier for users to enter values.

Address

AddressOptional

  <Textarea placeholder="Where do you live exactly ..." label="Address" />
  //label with help
  <Textarea label="Address" labelHelp="This is a help tooltip" />
  //label with caption optional
  <Textarea label="Address" labelOptional={true} />

Disabled

Make textarea look inactive by adding the disabled.

<Textarea placeholder="Hi, this textarea is disabled" disabled />

Error

Add Error Message to Textarea with prop errorMessage, which could be error.

Error Message

    <Textarea
      placeholder="Placeholder..."
      errorMessage="Error Message"
      variant="error"/>

    //add icon Error Message
    <Textarea
      placeholder="Placeholder..."
      errorMessage="Error Message"

Caption

you can add a caption below Textarea

Caption

<Textarea placeholder="Placeholder..." caption="Caption" captionIcon={<DynamicIcon name="AlertCircle" />} />

Props

property	propType	required	default	description
disabled	`boolean`	-	`false`	Disabled state of textarea
label	`string`	-	-	Adds helper text above your textarea element
style	object	-	-	The `style` prop lets you style elements inline
variant	`normal` \| `success` \| `error`	-	`normal`	Adds outline color and state of your placeholder
errorMessage	`string`	-	-	Add message to the error message
errorMessageIcon	`React.ReactNode`	-	-	Add icon to the error message
labelHelp	`string`	-	-	Add a help text tooltip to the label
labelOptional	`Boolean`	-	-	Add optional label
caption	`string`	-	-	Add field caption
captionIcon	`React.ReactNode`	-	-	Add icon to the caption

Do you have feedback?

Please let us know to make it better

Send Feedback