Input

メールアドレス、パスワード、名前などの短い入力に使います。複数行の文章には Textarea を使います。

プレビュー

標準・エラー・無効の入力

入力例付きのメール欄、明示的なエラー値、無効なワークスペース欄を比較します。

メール

エラー状態

無効

インストール

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

npx shadcn@latest add @neumorphism-ui/input

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

標準・エラー・無効の入力

npx shadcn@latest add @neumorphism-ui/input @neumorphism-ui/label

Registry JSON

使い方

id と htmlFor で表示ラベルを接続し、用途に合う type、name、autoComplete を指定します。補足やエラーは aria-describedby で関連付けます。

"use client";

import { useId } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Email</Label>
      <Input id={id} name="email" type="email" autoComplete="email" placeholder="you@example.com" />
    </div>
  );
}

API リファレンス

すべての native input 属性を引き渡しながら、ニューモーフィックな inset サーフェス、file input、disabled 状態、aria-invalid 状態を一貫してスタイリングします。

コンポーネント	プロパティ	型	デフォルト	説明
`Input`	`type`	`React.HTMLInputTypeAttribute`	`"text" (browser default)`	email、password、file などの native input type です。
`Input`	`value / defaultValue`	`string \| number`	`—`	制御された値、または非制御時の初期値です。
`Input`	`placeholder`	`string`	`—`	期待する値の形式を伝えるための短い例です。
`Input`	`disabled / required / readOnly`	`boolean`	`false`	native input の制約を設定します。
`Input`	`aria-invalid`	`boolean \| string`	`—`	エラー用の border と focus ring を有効にします。

プレビュー

標準・エラー・無効の入力

インストール

使い方

API リファレンス

アクセシビリティ