form fields

<tc-textarea>

Multi-line form-associated text area with label, helper, error state, and configurable rows and resize behavior.

import "@ra9/tan-compose-kit/textarea"

Props

NameTypeDefaultDescription
valuestring""Current value. Two-way synced with the underlying textarea.
namestring""Field name used when submitted as part of a `<form>`.
placeholderstring""Placeholder text shown when the textarea is empty.
labelstring""Label rendered above the textarea.
helperstring""Small helper text below the textarea.
errorstring""Error message; when non-empty paints the textarea invalid.
rowsnumber4Initial visible row count.
disabledbooleanfalseDisables the textarea; reflects to the host.
requiredbooleanfalseRequired for form validation; reflects to the host.
resize"none" | "vertical" | "horizontal" | "both""vertical"CSS resize behavior passed to the underlying textarea.

Events

EventDetailWhen
tc-input{ value: string }Fires on every keystroke with the latest value.

CSS variables

VariableDefaultDescription
--tc-input-bgvar(--tc-color-surface, #ffffff)Background color.
--tc-input-fgvar(--tc-color-ink, #14171f)Foreground (text) color.
--tc-input-bordervar(--tc-color-rule-strong, #d9cfb8)Resting border color.
--tc-input-border-focusvar(--tc-color-accent, #a16939)Border color when focused.
--tc-input-errorvar(--tc-color-danger, #b3261e)Border + text color in the error state.
--tc-input-helpervar(--tc-color-ink-muted, #6b7280)Color of the helper text.
--tc-input-radiusvar(--tc-radius-md, 8px)Corner radius.
--tc-input-fontvar(--tc-font-sans, …)Font family.

Examples

Basic usage

<tc-textarea label="Notes" placeholder="What did you find?" rows="4" ></tc-textarea>

Rows + resize

rows sets the initial height. resize controls whether the user can drag the bottom corner — set to "none" to lock the height entirely.

<tc-textarea label="Short" rows="2" resize="none"></tc-textarea> <tc-textarea label="Tall" rows="6" resize="vertical"></tc-textarea>

Error state

<tc-textarea label="Bio" error="Tell us more — at least 30 characters." ></tc-textarea>

In a form

Submits under name like a native textarea.

<form> <tc-textarea name="feedback" label="Feedback" required></tc-textarea> <tc-button type="submit">Send</tc-button> </form>

Theming

tc-textarea shares the --tc-input-* token family with the other form fields. Override on a wrapper to re-skin every field at once.

<div style="--tc-input-radius: 2px; --tc-input-border-focus: #333;"> <tc-textarea label="Feedback" rows="5"></tc-textarea> </div>

Accessibility

  • Renders a real <textarea> so all native keyboard behavior (Enter for newline, Tab to next field) works.
  • aria-invalid reflects the error state.
  • The label is a real <label> so click-to-focus works without extra wiring.
  • required is forwarded for native browser validation.

← All components