Textarea

A complete, controlled multi-line text field: label, a <textarea>, and helper/error text, wired together via FormComponent. Auto-grows to fit its content by default.

When to use

Use @uxf/form/textarea inside a @uxf/form form — it wires up react-hook-form (registers the field, runs the required validation, and reads the form context). For a standalone, controlled multi-line field outside a form, use @uxf/ui/textarea.

For a single-line field, use TextInput.

Usage

import { Textarea } from "@uxf/ui/textarea";
import { useState } from "react";

function Example() {
    const [value, setValue] = useState("");

    return (
        <Textarea
            label="Message"
            name="message"
            onChange={setValue}
            placeholder="Placeholder text..."
            value={value}
        />
    );
}

onChange receives the new value first, then the change event: (value: string, event?) => void.

Props

Extends FormControlProps<string, HTMLTextAreaElement>.

Prop	Type	Default	Description
`value` *	`string`	—	Current value.
`onChange` *	`(value: string, event?) => void`	—	Called with the new value.
`name` *	`string`	—	Field name.
`label`	`ReactNode`	—	Label text (rendered above the field).
`hiddenLabel`	`boolean`	`false`	Visually hides the label (kept for screen readers).
`helperText`	`ReactNode`	—	Helper/error text below the field. Styled as an error when `isInvalid`.
`placeholder`	`string`	—	Placeholder text.
`rows`	`number`	`4`	Minimum visible rows; also the baseline for auto-height.
`disableAutoHeight`	`boolean`	`false`	Disables auto-growing; the textarea stays a fixed `rows` tall.
`isInvalid`	`boolean`	`false`	Invalid state (error styling, `aria-invalid`, links `aria-describedby` to the helper text).
`isDisabled`	`boolean`	`false`	Disabled state.
`isReadOnly`	`boolean`	`false`	Read-only state.
`isRequired`	`boolean`	`false`	Marks the field required (label marker + native `required`).
`isFocused`	`boolean`	—	Forces the focused visual state.
`autoComplete`	`string`	—	Native `autocomplete`.
`maxLength`, `minLength`	`number`	—	Native length constraints.
`id`, `form`	`string`	—	Native attributes. `id` is auto-generated if omitted.
`onBlur`, `onFocus`	`FocusEventHandler<HTMLTextAreaElement>`	—	Focus handlers.
`className`	`string`	—	Extra class on the root element.
`style`	`CSSProperties`	—	Inline style on the textarea wrapper.

* required

The forwarded ref points to the underlying <textarea>.

Variants & states

Auto-height is on by default; the field grows with its content down to rows lines. Set disableAutoHeight for a fixed-height textarea. Behavioural states are set via isInvalid, isDisabled, isReadOnly, isRequired, and isFocused.

Requirements

Import the component stylesheets once in your global CSS:

@import url("@uxf/ui/css/textarea.css");
@import url("@uxf/ui/css/label.css");
@import url("@uxf/ui/css/form-component.css");

Default

Open in new tab

Usage

import { Textarea } from "@uxf/ui/textarea"; import { useState } from "react"; function Example() { const [value, setValue] = useState(""); return ( <Textarea label="Message" name="message" onChange={setValue} placeholder="Placeholder text..." value={value} /> ); }

onChange receives the new value first, then the change event: (value: string, event?) => void.

Props

Extends FormControlProps<string, HTMLTextAreaElement>.

Prop

Type

Default

Description

value *

string

—

Current value.

onChange *

(value: string, event?) => void

—

Called with the new value.

name *

string

—

Field name.

label

ReactNode

—

Label text (rendered above the field).

hiddenLabel

boolean

false

Visually hides the label (kept for screen readers).

helperText

ReactNode

—

Helper/error text below the field. Styled as an error when isInvalid.

placeholder

string

—

Placeholder text.

rows

number

4

Minimum visible rows; also the baseline for auto-height.

disableAutoHeight

boolean

false

Disables auto-growing; the textarea stays a fixed rows tall.

isInvalid

boolean

false

Invalid state (error styling, aria-invalid, links aria-describedby to the helper text).

isDisabled

boolean

false

Disabled state.

isReadOnly

boolean

false

Read-only state.

isRequired

boolean

false

Marks the field required (label marker + native required).

isFocused

boolean

—

Forces the focused visual state.

autoComplete

string

—

Native autocomplete.

maxLength, minLength

number

—

Native length constraints.

id, form

string

—

Native attributes. id is auto-generated if omitted.

onBlur, onFocus

FocusEventHandler<HTMLTextAreaElement>

—

Focus handlers.

className

string

—

Extra class on the root element.

style

CSSProperties

—

Inline style on the textarea wrapper.

* required

The forwarded ref points to the underlying <textarea>.