TextArea

A multi-line native form field for free text entry, rendered as a bordered, rounded <textarea> that shares Input's border, background.

View code

<form>
	<Label htmlFor="preview-review">Your review</Label>
	<TextArea
		id="preview-review"
		name="review"
		required
		rows={3}
		minLength={30}
		maxLength={400}
		placeholder="What did you think of it?"
		aria-describedby="preview-review-hint preview-review-error"
		aria-invalid={message === "" ? undefined : "true"}
		mix={[on<HTMLTextAreaElement, "input">("input", readLength)]}
	/>

	<Description id="preview-review-hint">Reviews are public and show your display name.</Description>
	<FieldError id="preview-review-error" hidden={message === ""}>
		{message}
	</FieldError>

	<Text>{length} / 400</Text>
	<Button type="submit" size="sm">Post review</Button>
</form>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { TextArea } from "@sdxc/ui";

Renders a native <textarea> host styled as a bordered, rounded field, colored through the data-color attribute contract — the same visual language as Input, rendering only the field itself.

Examples

<TextArea
	aria-label={t("form.comment.label")}
	color="brand"
	placeholder={t("form.comment.placeholder")}
/>

<TextArea id="notes" aria-describedby="notes-error" aria-invalid="true" />
<FieldError id="notes-error">{t("form.notes.tooLong")}</FieldError>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Types

Name	Values	What it decides
`Color`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role for the focus-visible ring, each mapped to its matching `--ui-*` variables.