A multi-line text input component for longer form content. Built with consistent GNOME-style theming.

Textarea component

import * as React from 'react';
import { Textarea } from 'gnome-ui/textarea';

export function TextareaDefault() {
  return (
    <div className="w-full max-w-sm">
      <Textarea 
        className="flex min-h-[80px] w-full rounded-xl border border-input bg-card px-3 py-2 text-sm text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:border-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 resize-y"
        placeholder="Write your message..." 
        rows={4}
      />
    </div>
  );
}

Anatomy

import { Textarea } from 'gnome-ui/textarea';

<Textarea />

Examples

Disabled

The textarea can be disabled to prevent user interaction. It styles automatically based on the disabled state.

Textarea component

import * as React from 'react';
import { Textarea } from 'gnome-ui/textarea';

export function TextareaDisabled() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Textarea 
        disabled 
        className="flex min-h-[80px] w-full rounded-xl border border-input bg-card px-3 py-2 text-sm text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:border-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 resize-y"
        placeholder="Disabled textarea" 
        rows={3}
      />
      <Textarea 
        disabled 
        className="flex min-h-[80px] w-full rounded-xl border border-input bg-card px-3 py-2 text-sm text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:border-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 resize-y"
        defaultValue="This textarea is disabled and cannot be edited."
        rows={3}
      />
    </div>
  );
}

With Label

Pair a Textarea with a label and helper text for complete form fields.

Textarea component

Bio

Write a short description about yourself.

import * as React from 'react';
import { Textarea } from 'gnome-ui/textarea';

export function TextareaWithLabel() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <label className="text-sm font-medium text-foreground" htmlFor="bio">
        Bio
      </label>
      <Textarea 
        id="bio"
        className="flex min-h-[80px] w-full rounded-xl border border-input bg-card px-3 py-2 text-sm text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:border-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 resize-y"
        placeholder="Tell us about yourself..."
        rows={4}
      />
      <p className="text-xs text-muted-foreground">
        Write a short description about yourself.
      </p>
    </div>
  );
}

A multi-line text input element for longer form content. Renders a <textarea> element.

Props

Prop	Type	Default	Description
className	string	—	CSS class applied to the element, or a function that returns a class based on the component's state.
defaultValue	string	—	The default value of the textarea. Use when uncontrolled.
rows	number	—	The number of visible text lines for the textarea.
placeholder	string	—	Placeholder text shown when the textarea is empty.
disabled	boolean	false	Whether the textarea is disabled.
render	ReactElement	ComponentRenderFn	—
value	string	—	The value of the textarea. Use when controlled.
onValueChange	function	—	Callback fired when the value changes. Use when controlled.

Textarea

Anatomy

Examples

Disabled

With Label

Props

On this page