Text area

Multi-line entry, with an optional character counter and a drag handle. Hover the field to see the hover state. It is a real pointer state, not a pill.

Input area

Drag the corner to resize. The counter is yours to cap.

<Textarea
  size="md"
  label="Input area"
  required
  info="We only use this to improve the product."
  maxLength={200}
  hint="Drag the corner to resize. The counter is yours to cap."
/>

Sizes

Three, on the shared size scale.

size	Height	Radius	Notes
`sm`	113px	8px	Figma X-Small.
`md`	127px	12px	Figma Small. The default.
`lg`	141px	12px	Figma Medium.

Props

Prop	Type	Default	Notes
`required`	boolean	false	Renders the asterisk and sets aria-required.
`optional`	boolean	false	Renders the muted "(Optional)" note.
`info`	string	—	Adds an info marker after the label, with this as its tooltip.
`maxLength`	number	—	Caps the value and turns the counter on.
`showCounter`	boolean	auto	On whenever maxLength is set. Pass false to hide it.
`resizable`	boolean	true	Show the drag handle that resizes the field.

Shared

Prop	Type	Default	Notes
`value`	string	—	Controlled value.
`defaultValue`	string	—	Initial value when uncontrolled.
`onChange`	(value: string) => void	—	Receives the value, never the event.
`label`	ReactNode	—	Rendered as a real <label> wired by htmlFor.
`hint`	ReactNode	—	Helper text under the field.
`error`	ReactNode	—	Error text. Implies invalid unless invalid says otherwise.
`invalid`	boolean	—	Forces the error styling on or off.
`errorKey`	string \| number	—	Change it to replay the error animation.
`disabled`	boolean	false	Greys the field out.
`readOnly`	boolean	false	Reads as filled, stays focusable.
`size`	'sm' \| 'md' \| 'lg'	'md'	Size scale, where the component defines one.
`classNames`	Record<Part, string>	—	Per-part class names.

Resizing

The handle is a real drag, not the browser's native resize, which draws its own corner widget on top of the mark and only works from the bottom-right corner. Dragging writes to --yote-ta-height, which means you can set the same property yourself to pick a starting height.

<Textarea
  label="Input area"
  style={{ '--yote-ta-height': '200px' }}
/>

Custom properties

Every measured value is a property on the root, so one field can be retuned without a stylesheet.

Property	Controls
`--yote-ta-height`	Field height. The drag handle writes to this one.
`--yote-ta-radius`	Corner radius.
`--yote-ta-pad-y`	Vertical padding.
`--yote-ta-pad-left`	Left padding.
`--yote-ta-pad-right`	Right padding. Tighter than the left, to sit the handle near the edge.