components / 05

marked textarea

longer thoughts get room to grow without losing their human edge.

shadcnnpx shadcn@latest add berkantay/cheez/marked-textarea

live

playground

0 / 280

messageplain text, up to 280 characters0 / 280

size

resize

character

focus mark

hover mark

focus ink

hover ink

behavior

<MarkedTextarea
  label="message"
  placeholder="write something human..."
  textareaSize="medium"
  autoGrow={true}
  resize="vertical"
  maxLength={280}
  showCount={true}
  mark="rounded-box"
  interactionMark="short-underline"
  character="rushed"
  error={undefined}
/>

behavior

states

one native textarea throughout

idle

note

hover

note

focus

note

filled

note

invalid

noteadd a little more detail

with count

bio18 / 120

auto grow

message

disabled

note

read only

note

published note

reference

api

all native textarea props are forwarded

part	prop	type	default	purpose
Textarea	`label`	`ReactNode`	`—`	connected visible label
Textarea	`description`	`ReactNode`	`—`	accessible helper text
Textarea	`error`	`ReactNode`	`—`	persistent invalid state
Textarea	`value`	`string`	`—`	controlled native value
Textarea	`defaultValue`	`string`	`—`	uncontrolled initial value
Textarea	`autoGrow`	`boolean`	`false`	grow with content
Textarea	`maxRows`	`number`	`10`	auto-grow height cap
Textarea	`resize`	`"vertical" \| "none"`	`"vertical"`	manual resize mode
Textarea	`showCount`	`boolean`	`with maxLength`	show current length
Textarea	`maxLength`	`number`	`—`	native length limit
Textarea	`textareaSize`	`"small" \| "medium" \| "large"`	`"medium"`	control scale
Textarea	`mark`	`CheezType`	`"rounded-box"`	focus mark
Textarea	`interactionMark`	`CheezType`	`"short-underline"`	hover mark
Textarea	`errorMark`	`CheezType`	`"wavy-underline"`	invalid mark
Textarea	`character`	`"calm" \| "rushed" \| "chaotic"`	`"rushed"`	drawing personality
Textarea	`disabled`	`boolean`	`false`	native disabled state
Textarea	`readOnly`	`boolean`	`false`	native read-only state

behavior notes

the rendered control is always a native textarea
auto-grow is optional and capped by maxRows
character count follows controlled and uncontrolled values
invalid feedback persists until error is removed
labels, descriptions, and errors receive connected ids
disabled and read-only fields never animate