Textarea

The multiline input Attio uses in Settings (the Profile "Personal context" field): an inset 1px ring (radius 8), 14px text, and an optional character counter pinned bottom-right that turns red past the limit. It forwards every native <textarea> prop.

Preview

Installation

bun add crisp

import "crisp/styles.css";
import { Textarea } from "crisp";

Usage

import { Textarea } from "crisp";
import * as React from "react";

function Context() {
  const [v, setV] = React.useState("");
  return (
    <Textarea
      showCount
      maxLength={4000}
      rows={4}
      placeholder="Describe how you work…"
      value={v}
      onChange={(e) => setV(e.target.value)}
    />
  );
}

Props

All other native <textarea> props (value, defaultValue, onChange, rows, placeholder, disabled, …) are forwarded, and the ref points at the <textarea>.

Notes

• Counter. With showCount + maxLength, a muted N / max sits bottom-right (the field pads to clear it); it turns bgDanger if the value ever exceeds the limit. It tracks controlled or uncontrolled values.
• Resize. Vertical resize is allowed by default; set style={{ resize: "none" }} to lock it (Attio locks theirs).
• Focus. The inset ring turns brand on focus, matching Input.