Textarea

A multi-line text field in the same hairline frame as Input, for notes, prompts and log entries.

import { Textarea } from 'jarvis-react-ui';

Basic

rows sets the visible lines (3 by default), size the font size and padding. The field is 320px wide; fullWidth stretches it to its container. Users can resize it vertically.

import { Textarea } from 'jarvis-react-ui';

export default function Basic() {
    return (
        <div className="flex flex-col gap-3">
            <Textarea aria-label="Mission notes" placeholder="Mission notes…" />
            <Textarea aria-label="Compact notes" placeholder="Compact" size="sm" rows={2} />
        </div>
    );
}

Auto resize

autoResize grows the field with its content, from rows up to maxRows lines; beyond that it scrolls. It works with controlled and uncontrolled values.

import { useState } from 'react';
import { Textarea } from 'jarvis-react-ui';

export default function AutoResize() {
    const [text, setText] = useState('Type a few lines: the field grows up to six lines.');

    return (
        <Textarea
            aria-label="Log entry"
            value={text}
            onChange={(e) => setText(e.target.value)}
            autoResize
            rows={2}
            maxRows={6}
        />
    );
}

States

invalid shows the error border and sets aria-invalid; disabled dims the field.

import { Textarea } from 'jarvis-react-ui';

export default function States() {
    return (
        <div className="flex flex-col gap-3">
            <Textarea aria-label="Invalid" invalid defaultValue="Checksum mismatch" rows={2} />
            <Textarea aria-label="Disabled" disabled defaultValue="Read only" rows={2} />
        </div>
    );
}

Sound

Hovering plays hover_button through the nearest SfxProvider. See Sound effects.

Accessibility

• Renders a native <textarea>; name it with aria-label or a <label htmlFor>.
• invalid sets aria-invalid. Describe the error in text and link it with aria-describedby.
• The ref is forwarded to the textarea.

API

Also accepts inherited props from TextareaHTMLAttributes (14), HTMLAttributes (54), AriaAttributes (53), DOMAttributes (169), RefAttributes (1), Attributes (1).