Client component

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" w="full" maxW="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>
  );
}

size

variant

rows

autoGrowshowCount

import { Textarea } from "astralis-ui";

<Textarea />

Import#

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

Auto-grow#

autoGrow lets the field grow with its content instead of scrolling. It uses the CSS field-sizing property, so there is no resize listener; rows sets the starting height. Browsers without field-sizing keep a normal scrolling textarea.

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

export function TextareaAutoGrow() {
  return (
    <Box w="full" maxW="md">
      <Textarea autoGrow rows={2} placeholder="Keep typing: the field grows with each new line" />
    </Box>
  );
}

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.
`autoGrow`	`boolean`	`false`	Grows with its content instead of scrolling, using CSS field-sizing with no JavaScript. rows becomes the minimum height.
`showCount`	`boolean`	`false`	Character counter (pairs with `maxLength`).
`invalid / disabled / readOnly`	`boolean`	`from [Field](/docs/components/field)`	State plumbing.

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