Textarea

Displays a multi-line text input.

import * as stylex from '@stylexjs/stylex';

import { container } from '@/lib/constants.stylex';

import { Textarea } from '@/components/ui/textarea';

export default function TextareaDemo() {
  return (
    <div {...stylex.props(styles.wrap)}>
      <Textarea placeholder="Type your message here." />
    </div>
  );
}

const styles = stylex.create({
  wrap: {
    width: container.lg,
  },
});

Install

Bash

npx @madeui/cli add textarea

Usage

TSX

import { Textarea } from '@/components/ui/textarea';

<Textarea placeholder="Type your message here." />

With field

Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.

Bio

You can @mention other users and organizations.

import * as stylex from '@stylexjs/stylex';

import { Field, FieldDescription, FieldLabel } from '@/components/ui/field';
import { Textarea } from '@/components/ui/textarea';
import { container } from '@/lib/constants.stylex';

export default function TextareaWithField() {
  return (
    <Field style={styles.root}>
      <FieldLabel htmlFor="textarea-with-field-bio">Bio</FieldLabel>
      <Textarea
        id="textarea-with-field-bio"
        placeholder="Tell us a little about yourself"
      />
      <FieldDescription>
        You can @mention other users and organizations.
      </FieldDescription>
    </Field>
  );
}

const styles = stylex.create({
  root: {
    width: container.lg,
  },
});

Disabled

import * as stylex from '@stylexjs/stylex';

import { container } from '@/lib/constants.stylex';

import { Textarea } from '@/components/ui/textarea';

export default function TextareaDisabled() {
  return (
    <div {...stylex.props(styles.wrap)}>
      <Textarea placeholder="Disabled" disabled />
    </div>
  );
}

const styles = stylex.create({
  wrap: {
    width: container.lg,
  },
});

Invalid

Set invalid on Field to show validation errors — the label and error message pick up the invalid styling, and aria-invalid is applied to the textarea automatically.

Bio

import * as stylex from '@stylexjs/stylex';

import { Field, FieldError, FieldLabel } from '@/components/ui/field';
import { Textarea } from '@/components/ui/textarea';
import { container } from '@/lib/constants.stylex';

export default function TextareaInvalid() {
  return (
    <Field invalid style={styles.root}>
      <FieldLabel htmlFor="textarea-invalid-bio">Bio</FieldLabel>
      <Textarea id="textarea-invalid-bio" defaultValue="Hi" />
      <FieldError>Bio must be at least 10 characters.</FieldError>
    </Field>
  );
}

const styles = stylex.create({
  root: {
    width: container.lg,
  },
});

API reference

Textarea

Prop	Type	Default	Description
`disabled`	`boolean`	`false`
`style`	`StyleXStyles`	—	StyleX styles merged last — always win over the component’s own styles.

All native <textarea> props are forwarded.