テキストエリア

コメント、プロフィール、サポートメッセージ用の複数行テキスト入力欄です。ネオブルータリズム風の枠線と影の演出が施されています。

import { Textarea } from "@/components/ui/textarea"

export function TextareaDemo() {

Textarea は複数行のテキスト入力です。スタイル付きのネイティブ <textarea> 要素で、どちらのバックエンドにもラッパーライブラリはありません。CSS の field-sizing: content で内容に合わせて自動拡張し、ネオブルータリストのレシピに沿ってスタイルしています。太い枠線、硬い影、太字のタイポグラフィです。

次のような場面で使います：

コメントと返信 — 投稿、レビュー、チケットへの自由記述。
自己紹介と説明 — プロフィールの自己紹介、商品説明、設定フォームの短文。
フィードバックとサポート — バグレポート、お問い合わせなど、1行を超えるメッセージ。

インストール


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
npx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/textarea.json

以下のコードをコピーしてプロジェクトに貼り付けてください。

components/ui/textarea.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "flex field-sizing-content min-h-16 w-full rounded border-2 bg-input px-3 py-2 text-sm shadow-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Textarea }

インポートパスをプロジェクトの構成に合わせて更新してください。

使い方

import { Textarea } from "@/components/ui/textarea"

<Textarea />

使用例

Field

Field、FieldLabel、FieldDescription を使って、ラベルと説明付きのテキストエリアを作成します。

import {
  Field,
  FieldDescription,

無効

テキストエリアを無効化するには、disabled プロパティを使用します。無効状態にスタイルを適用するには、Field コンポーネントに data-disabled 属性を追加します。

import { Field, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"

不正な値

テキストエリアを不正としてマークするには、aria-invalid プロパティを使用します。不正な状態にスタイルを適用するには、Field コンポーネントに data-invalid 属性を追加します。

import {
  Field,
  FieldDescription,

Button

Button と組み合わせて、送信ボタン付きのテキストエリアを作成します。

import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

RTL

Neobrutalism で RTL を有効にする方法は、RTL 設定ガイドをご覧ください。

"use client"

import * as React from "react"

ネイティブのフォームコントロールなので、キーボードアクセスは標準で揃います。Tab でフォーカスし、Enter はフォーム送信ではなく改行を挿入します。ARIA パターンは適用されません。必ず見えるラベルと組み合わせてください。FieldLabel が htmlFor の配線を担います（Field の例を参照）。検証時は textarea に aria-invalid を付け、aria-describedby でエラーメッセージを参照し、スクリーンリーダーが両方を読み上げるようにします。