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

Input

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

@neumorphism-ui/input

Registry JSON

プレビュー

メール

エラー状態

無効

インストール

npx shadcn@latest add @neumorphism-ui/input

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

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

使い方

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

Import

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

Example

<div className="grid gap-2">
  <Label htmlFor="email">メールアドレス</Label>
  <Input
    id="email"
    name="email"
    type="email"
    placeholder="you@example.com"
    autoComplete="email"
  />
</div>

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`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 を有効にします。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ