Textarea

Preview

'use client';

import { Textarea } from '@/registry/san-francisco/ui/textarea';

export default function TextareaDemo() {
  return <Textarea className="w-full max-w-xs" placeholder="Type your message..." />;
}

Installation

bun

bunx shadcn@latest add @sft-ui/textarea

States

'use client';

import { Textarea } from '@/registry/san-francisco/ui/textarea';

export default function TextareaDemoStates() {
  return (
    <>
      <Textarea className="w-full max-w-xs" placeholder="Default" />
      <Textarea className="w-full max-w-xs" disabled placeholder="Disabled" />
      <Textarea className="w-full max-w-xs" aria-invalid placeholder="Invalid" />
    </>
  );
}

Props

Prop	Type	Default	Description
`placeholder`	`string`	—	Placeholder text.
`disabled`	`boolean`	`false`	Disables the textarea.
`className`	`string`	—	Additional CSS classes to apply.

All standard HTML textarea attributes are supported via React.ComponentProps<"textarea">.