Inputs

Textarea

Grows with its content via field-sizing (JS fallback), clamped by minRows/maxRows. The bare variant drops the frame, for a message box or an editor that draws its own.

Live example

Import

Each family is its own entry point, so a page loads only what it uses.

tsx

import { IconButton } from "@nibapp/ui/components/button";import { Textarea } from "@nibapp/ui/components/textarea";

Props

Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.

IconButton

Square, icon-only button. Pair with <Tooltip> to surface the label visually (a `disabledReason` brings its own).

Prop	Type	Default	Description
size	"xs" \| "sm" \| "md" \| "lg"	"md"
aria-label (required)	string	—	Required: icon-only controls must be named for assistive tech.
children (required)	ReactNode	—
loading	boolean	false
disabledReason	string \| undefined	—	Disables the button and says why, as Button's `disabledReason`.

Also takes the props of Base UI's Button, except aria-label and children.

Textarea

Multi-line text field. Auto-grows with CSS `field-sizing: content` and falls back to measuring `scrollHeight` where unsupported. Works inside <Field> for labels and validation. What a person writes takes its direction from its first letter (`dir="auto"`), so an English note reads left to right in a right-to-left interface; pass `dir` to fix it.

Prop	Type	Default	Description
variant	"default" \| "bare"	"default"	default Framed field, same chrome as Input. bare No chrome: embed inside a custom container, such as a message field with its own toolbar.
size	"sm" \| "md" \| "lg"	"md"
ref	Ref<HTMLTextAreaElement> \| undefined	—
value	string	—
defaultValue	string	—
onValueChange	(value: string) => void	—	Fires with the new text on every edit.
autoGrow	boolean	true	Grow with content between `minRows` and `maxRows`. Default `true`.
minRows	number	—	Minimum visible lines. Default 3 (1 for `bare`).
maxRows	number	12	Maximum visible lines before scrolling. Default 12.
invalid	boolean	—	Marks the field invalid outside of a <Field>.

Also takes the props of a <textarea> element, except ref, rows, value and defaultValue.