Textarea - Develop

Textarea shares the same properties as Input component of type text, it just allows for multiple lines of text. And you can pass children to it. Textareas can have an error or success state to provide feedback to the user.

Keep in mind that the <textarea> element inherently includes native browser properties like onChange. Additionally, Cherry UI components introduce custom properties that always begin with a $ to distinguish them from native component props.

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

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

You can add a label by adding a $label prop.

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

export default function Page() {
  return <Textarea $label="Username" $fullWidth />;
}

Here is an example of a Textarea with success and error state.

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

export default function Page() {
  return (
    <Textarea $success placeholder="Yay" />
    <Textarea $error placeholder="Ops" />
  )
}

Properties

Explore the source code on GitHub: