Textarea
すべての native textarea 属性を引き渡しながら、最小高さ、垂直 resize、focus、aria-invalid の各状態をニューモーフィックな token でスタイリングします。
@neumorphism-ui/textareaプレビュー
インストール
インストール: textarea
npx shadcn@latest add @neumorphism-ui/textareaCLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。
この Registry を初めて使う場合は、先に namespace の設定 を完了してください。
使い方
使い方: インストール
npx shadcn@latest add @neumorphism-ui/label @neumorphism-ui/textareaImport
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 リファレンス
| コンポーネント | プロパティ | 型 | デフォルト | 説明 |
|---|---|---|---|---|
Textarea | value / defaultValue | string | — | 制御されたテキスト、または非制御時の初期テキストです。 |
Textarea | rows | number | — | 初期表示する行数です。 |
Textarea | placeholder | string | — | 期待する入力形式を伝えるための短い例です。 |
Textarea | disabled / required / readOnly | boolean | false | native input の制約を設定します。 |
Textarea | aria-invalid | boolean | string | — | エラー用の border と focus ring を有効にします。 |
アクセシビリティ
- 01
Label の htmlFor と Textarea の id を関連付け、placeholder で Label を置き換えないでください。
- 02
文字数を制限する場合は maxLength と現在の文字数を提供し、必要に応じて aria-describedby で関連付けてください。
- 03
エラーメッセージに id を付け、aria-invalid と aria-describedby で control に関連付けてください。