<ExpandingTextareaInput
value={note}
onValueChange={setNote}
ariaLabel="Notes"
placeholder="Add a note"
/>Closed, it is a flush preview of the first line, so a long note never stretches its row. Opening it drops a textarea over the cell — as wide as the cell, its first line where the preview was — so it reads as the cell unfolding in place. Escape or a click away closes it; ⌘/Ctrl+Enter closes it from the keyboard.
In a table
Made for a Spreadsheet cell, which flattens it like any control and draws the focus ring itself — but it works in any table where one line must summarize a paragraph.
| Phase | Notes |
|---|---|
| design | |
| build |
For a value that is a whole sub-table rather than text, see Spreadsheet.NestedInput.
API
| Prop | Type | Default | |
|---|---|---|---|
ariaLabel | string | required | Accessible name for the trigger (the preview alone rarely identifies it). |
onValueChange | (value: string) => void | required | |
value | string | required | |
className | string | — | Classes for the trigger button that sits in the cell. |
contentClassName | string | — | Classes for the editor surface (width, height bounds). |
invalid | boolean | — | Tints the cell and raises its destructive ring, like any invalid control. |
maxLength | number | — | |
placeholder | string | — | Shown muted while the value is empty, in the trigger and the editor. |
exit | Exit | — | Inside a <Presence>: plays this child's way out before it unmounts. |
Plus every <button> prop. Source: expanding-textarea-input/components/expanding-textarea-input.tsx.