Textarea

A multi-line text field with variants, character count, and Field integration.

29/200

import { Textarea, VStack } from "astralis-ui";

export function TextareaDemo() {
  return (
    <VStack gap="4" alignItems="stretch" className="astralis:w-full astralis:max-w-md">
      <Textarea placeholder="Tell us about your mission…" />
      <Textarea placeholder="With a character count" showCount maxLength={200} defaultValue="Astralis launches in T-minus…" />
      <Textarea placeholder="Filled variant" variant="filled" rows={2} />
    </VStack>
  );
}

Import#

import { Textarea } from "astralis-ui";
// also available as Input.TextArea

Props#

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Text and padding scale.
`variant`	`"outline" \| "filled" \| "underline" \| "unstyled"`	`"outline"`	Visual style.
`rows`	`number`	`4`	Initial visible lines.
`showCount`	`boolean`	`false`	Character counter (pairs with `maxLength`).
`invalid` / `disabled` / `readOnly`	`boolean`	from Field	State plumbing.

Inside a Field, the label association, required, and help/error aria-describedby wiring all come for free.