Textarea

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeTextareaExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeTextareaExample/></NativeScope>}

Sizes

medium and small match Input's insets, so the two components stack in a form without a seam. rows sets the resting height.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="textarea" id="sizes"/>}

Auto resize

autoResize grows the field with its text, one line at a time, between rows and maxRows. Past the ceiling it scrolls. The height is measured from zero on every change, so the field shrinks back when text is deleted.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="textarea" id="auto-resize"/>}

Character count

showCount puts the counter on the hint row. With maxLength it reads 12/160 and the browser enforces the limit; without one it just counts.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="textarea" id="character-count"/>}

States

Hover and focus cross-fade the ring. isDisabled and isInvalid override both and repaint the field, hint and label. resize="none" removes the native grab handle when a fixed height matters more than the reader's comfort.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="textarea" id="states"/>}