Textarea

In the app

Notes and reasons. Grows with its content, resizes vertically, never horizontally.

@varick/ui/components/textareaAdded 2 Sept 2026

Usage

import { Textarea } from "@varick/ui/components/textarea";

export function Example() {
  return <Textarea placeholder="Why is this being approved?" rows={3} />;
}

Variants

States

<Textarea invalid defaultValue="Too short" />
<Textarea disabled />

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
invalid	boolean	false	Red border and aria-invalid.
...props	ComponentProps<'textarea'>		rows, value, onChange, placeholder, disabled.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.note-box {
  width: 100%;
  min-height: 68px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--fg-high);
  resize: vertical;
  field-sizing: content;
}
.note-box:focus { outline: none; border-color: var(--accent); }