TextArea

The TextArea component is a basic textarea component which users can use to enter values into it.

Usage#

Code#

<TextArea placeholder="Enter description" />

Size#

The size of the TextArea component can be adjusted by using width and row for changing the width and height of the component respectively. Both props accepts number value where width is used as pixels and row is the standard row prop that comes with the textarea tag

Code#

<TextArea placeholder="Enter description" width={300} rows={4} />

Disabled#

The TextArea field can be disabled by using a boolean prop called disabled

Code#

<TextArea placeholder="Enter description" disabled />

Validation#

The validation of TextArea field is done by two props isValid and validationText. The isValid prop is a boolean which denotes the validation for the field and validationText acts as a validation message. The validationText prop is not mandatory for indicating validation

Please enter a description

Code#

<TextArea placeholder="Enter description" isInvalid={true} />
<TextArea
  placeholder="Enter description"
  isInvalid={true}
  validationText="Please enter a description"
/>

Controlled Usage#

The TextArea component from Palette is same as the textarea use value and onChange props to control the field value. Use event.target.value from onChange to set the value

const MyComponent = () => {
  const [name, setName] = useState("");
  return (
    <TextArea
      placeholder="Enter description"
      value={name}
      onChange={(e) => {
        setName(e.target.value);
      }}
    />
  );
};

API#

Prop	Type	Possible values	Default Value
placeholder	`string`	Any string value	`""`
width	`number`	Any number accepted values	400
row	`number`	Any number accepted values	2
disabled	`boolean`	`true` and `false`	`false`
isInvalid	`boolean`	`true` and `false`	`false`
validationText	`string`	Any string value	`""`

Built by Akshay 🤙