Input

テキスト入力のためのコンポーネント。

Installation

npx shadcn@latest add https://kasumi-ui.vercel.app/r/input.json

Usage

import { Input } from "@/components/ui/input";

<Input placeholder="テキストを入力" />

Variant

<Input variant="outline" placeholder="Outline" />
<Input variant="underline" placeholder="Underline" />

Size

<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />

Invalid

<Input error placeholder="エラーのある入力" />

Password

type="password" を指定すると、表示切替トグルが自動で表示されます。

<Input type="password" placeholder="パスワード" />

Props

PropTypeDefaultDescription
variant"underline" | "outline""underline"入力フィールドのスタイル
size"sm" | "md" | "lg""md"入力フィールドのサイズ
errorbooleanfalseエラー状態を表示する