rafty/ui Docs

The Text area component allows you to easily create multi-line text inputs.

Anatomy

Import the component.

import { Textarea } from "@rafty/ui";

<Textarea />;

Usage

<Textarea placeholder="This is a sample placeholder" />

Variants

Pass the variant prop if you need to adjust visual style of the textarea. Values can be solid, outline, ghost.

<Textarea
  placeholder="This is a sample placeholder"
  variant="solid"
/>

UnStyled

Pass isUnstyled prop to remove style from textarea.

<Textarea
  className="border-secondary-200 dark:border-secondary-500 w-full rounded-md border bg-transparent p-2 outline-none ring-offset-0 hover:border-green-300 focus:ring-1 focus:ring-sky-300"
  isUnStyled
  placeholder="This is a sample placeholder"
/>

Disabled

Pass isDisabled prop to put textarea in disabled state.

<Textarea
  isDisabled
  placeholder="this is sample placeholder"
/>

API

Root

Property	Description	Type	Default
isUnStyled	Removes style from component	`boolean`	`false`