Textarea

Textarea shares the same properties as the Input component of type text, but allows for multiple lines of text. 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.

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