Textarea

Textarea allows for multiple lines of text and shares most of the Input component's properties: $label, $size, $error, $success, $fullWidth, and $wrapperClassName. Unlike Input, it does not support $icon or $iconPosition. Textareas can have error or success states to provide feedback to the user.

Keep in mind that the <textarea> element inherently includes native browser properties like onChange. Cherry UI components introduce custom properties that always begin with a $ to distinguish them from native props. To pre-fill the content, use the native value or defaultValue attributes rather than passing children.

For design guidelines and all interactive states, see the Inputs design page.

import React from "react";
import { Textarea } from "cherry-styled-components";

export default function Page() {
  return <Textarea placeholder="Placeholder" />;
}

With a label:

<Textarea $label="Username" $fullWidth />

With success and error states:

<Textarea $success placeholder="Yay" />
<Textarea $error placeholder="Ops" />

Properties