StellarUI

<stellar-text-area>

Properties

Preview

Markup

Copy

<stellar-text-area
  label="Notes"
  description="Use this for longer freeform content."
  placeholder="Write a note..."
>
  Draft release notes
</stellar-text-area>

API

Complete props, events, slots, and implementation notes for the shipped text area.

Props

Prop	Type	Default
`tone`	`neutral \| primary \| secondary \| tertiary \| error`	`neutral`
`appearance`	`default \| ghost`	`default`
`size`	`xs \| sm \| md \| lg \| xl`	`md`
`disabled`	`boolean`	`false`
`label`	`string`	`''`
`description`	`string`	`''`
`error`	`string`	`''`
`value`	`string`	`''`
`placeholder`	`string`	`''`

Events

Event	Source	Notes
`input` / `change`	native	Bubbled from the inner native `<textarea>`.
`focus` / `blur`	native	Use normal DOM listeners on the custom element.
custom events	none	`stellar-text-area` does not emit custom events.

Slots

Slot	Notes
`label`	Optional content above the field. Overrides the `label` prop when present.
`description`	Optional helper content below the field. Overrides the `description` prop when present.
`error`	Optional validation message below the field. It replaces `description` while the inner control is invalid.

Notes

The public tag is `stellar-text-area`, backed by a real native `<textarea>` inside a light wrapper.
The shipped API stays small: `tone`, `appearance`, `size`, `disabled`, `label`, `description`, `value`, and `placeholder`.
`stellar-text-area` uses `mode: 'open'`, so it can read exported `stellar.css` tokens directly while keeping its own field styling local.
`required`, `aria-invalid`, and `custom-validity` forward to the inner native textarea for validation-sensitive flows.
The host exposes `setCustomValidity()`, `checkValidity()`, `reportValidity()`, `validity`, `validationMessage`, and `willValidate`, so app code can use native-like validity APIs on the custom element.
For Datastar, prefer `data-attr:custom-validity="..."` on the custom element host instead of the Pro-only `data-custom-validity` attribute.
The visual baseline follows the shipped textarea sizing, ghost treatment, and colored border/focus behavior with direct Stellar token mapping.
The component intentionally stays close to native textarea behavior instead of inventing icon slots or extra helper structure.