Neumorphism UI

Textarea

メモや説明など、複数行になり得る文章の入力に使います。

プレビュー

投資メモと入力状態

240 文字制限の編集可能なメモを、明示的なエラーと無効状態の欄と比較します。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/textarea

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

投資メモと入力状態

npx shadcn@latest add @neumorphism-ui/label @neumorphism-ui/textarea
Registry JSON

使い方

表示ラベルを接続し、name と rows を指定します。用途に合う制約や補足を加え、短い一行の値には Input を使います。

"use client";

import { useId } from "react";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Project description</Label>
      <Textarea id={id} name="description" placeholder="Describe your project" rows={4} />
    </div>
  );
}

API リファレンス

すべての native textarea 属性を引き渡しながら、最小高さ、垂直 resize、focus、aria-invalid の各状態をニューモーフィックな token でスタイリングします。

コンポーネントプロパティ型デフォルト説明
Textareavalue / defaultValuestring—制御されたテキスト、または非制御時の初期テキストです。
Textarearowsnumber—初期表示する行数です。
Textareaplaceholderstring—期待する入力形式を伝えるための短い例です。
Textareadisabled / required / readOnlybooleanfalsenative input の制約を設定します。
Textareaaria-invalidboolean | string—エラー用の border と focus ring を有効にします。

アクセシビリティ

  • 01

    Label の htmlFor と Textarea の id を関連付け、placeholder で Label を置き換えないでください。

  • 02

    文字数を制限する場合は maxLength と現在の文字数を提供し、必要に応じて aria-describedby で関連付けてください。

  • 03

    エラーメッセージに id を付け、aria-invalid と aria-describedby で control に関連付けてください。