[ @sdxc/ui ]

TextArea

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

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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 remix

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

Brand comment box

View code

<TextArea
	name="comment"
	aria-label="Comment"
	color="brand"
	placeholder="Leave a comment for the Acme team…"
/>

Invalid value

Release notesKeep release notes under 80 characters.

View code

<div mix={[vstack({ gap: 2, align: "stretch" })]}>
	<Label htmlFor="notes">Release notes</Label>
	<TextArea
		id="notes"
		name="notes"
		defaultValue="Acme 4.2 rewrites the deploy pipeline. Builds start in half the time and previews stay warm between pushes."
		aria-describedby="notes-error"
		aria-invalid="true"
	/>
	<FieldError id="notes-error">Keep release notes under 80 characters.</FieldError>
</div>

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.