RadCN
Inputsreadycomponentready

Textarea

A native textarea primitive for multi-line text input, disabled states, labels, helper text, and button composition.

Importimport { Textarea } from 'radcn/textarea'
Preview

Live package example

Render the five plain shadcn Textarea examples with native Remix 3 controls and explicit RadCN composition.

Example Parity

Render the five plain shadcn Textarea examples with native Remix 3 controls and explicit RadCN composition.

Preview

Your message will be copied to the support team.

import { Button } from 'radcn/button'
import { Label } from 'radcn/label'
import { Textarea } from 'radcn/textarea'

export function TextareaPreview() {
  return (
    <div class="textarea-examples">
      <Textarea name="message" placeholder="Type your message here." />

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

      <div class="field">
        <Textarea name="message" placeholder="Type your message here." />
        <Button type="submit">Send message</Button>
      </div>

      <div class="field">
        <Label for="message">Your message</Label>
        <Textarea id="message" name="message" placeholder="Type your message here." />
      </div>

      <div class="field">
        <Label for="message-2">Your Message</Label>
        <Textarea
          ariaDescribedBy="message-2-help"
          id="message-2"
          name="message"
          placeholder="Type your message here."
        />
        <p id="message-2-help">Your message will be copied to the support team.</p>
      </div>
    </div>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Textarea } from 'radcn/textarea'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Renders a native textarea element, preserving browser focus, editing, selection, resize, and form submission behavior.
  • Supports ariaDescribedBy and ariaInvalid for helper text and validation state through explicit string props.
  • Leaves labeling to real Label components and helper text to authored content so accessible names and descriptions stay explicit.
  • Disabled textareas use the native disabled attribute and public RadCN disabled styling.

Customization

  • Textarea dimensions, borders, focus rings, placeholder color, disabled state, invalid state, and resize behavior are controlled by RadCN CSS variables and app CSS.
  • The public data-radcn-textarea hook supports targeted app CSS without relying on generated DOM wrappers.
  • Button, Label, helper text, Field, Form, and InputGroup composition stay outside the Textarea package, so layout and submission behavior remain app-owned.

Remix 3 Notes

  • shadcn/ui data-slot="textarea" maps to RadCN public data-radcn-textarea and the radcn-textarea class.
  • Tailwind utility styling maps to RadCN classes, inline styles, CSS variables, and docs/fixture layout wrappers.
  • React prop spreading maps to explicit Remix UI props such as id, name, placeholder, disabled, rows, value, ariaDescribedBy, and ariaInvalid.
  • Autosize behavior, form-library integration, toast results, and icon presentation are app-owned or covered by Field, Form, and InputGroup rather than Textarea-owned dependencies.