フォームと選択@neumorphism-ui/textarea

Textarea

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

@neumorphism-ui/textarea
Registry JSON

プレビュー

インストール

インストール: textareanpx shadcn@latest add @neumorphism-ui/textarea

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定 を完了してください。

使い方

使い方: インストールnpx shadcn@latest add @neumorphism-ui/label @neumorphism-ui/textarea

Import

Textarea の import コード
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

Example

Textarea の使用コード
<div className="grid gap-2">
  <Label htmlFor="note">メモ</Label>
  <Textarea
    id="note"
    name="note"
    placeholder="チームへのメモを入力してください。"
    rows={5}
  />
</div>

API リファレンス

コンポーネントプロパティ型デフォルト説明
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 に関連付けてください。