Input

インポート

import { Input } from '@caroainc/ui-components'

個別サブパス（バンドルサイズを抑えたい場合）:

import { Input } from '@caroainc/ui-components/input'

基本的な使い方

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

バリアント

default

filled

ghost

underline

<Input variant="default" placeholder="Default" />
<Input variant="filled" placeholder="Filled" />
<Input variant="ghost" placeholder="Ghost" />
<Input variant="underline" placeholder="Underline" />

タイプ別

<Input type="text" placeholder="テキスト" />
<Input type="email" placeholder="メールアドレス" />
<Input type="password" placeholder="パスワード" />
<Input type="number" placeholder="数値" />
<Input type="search" placeholder="検索..." />

無効状態

<Input disabled placeholder="無効な入力" />

Labelと組み合わせ

メールアドレス

<Label htmlFor="email">メールアドレス</Label>
<Input id="email" type="email" placeholder="[email protected]" />

アイコン付き入力

InputGroupコンポーネントを使用してアイコンを追加できます。

円

import { InputGroup, InputGroupAddon, InputGroupInput } from '@caroainc/ui-components/client'
 
<InputGroup>
  <InputGroupAddon align="inline-start">
    <Icon name="Search" size="sm" />
  </InputGroupAddon>
  <InputGroupInput placeholder="検索..." />
</InputGroup>

エラー状態

classNameで直接色を上書きするのではなく、aria-invalid属性を渡してください。aria-invalid:border-destructive aria-invalid:ring-destructiveが組み込み済みのため、自動的に赤枠になります（アクセシビリティ上も正しい方法）。

メールアドレス有効なメールアドレスを入力してください

<div className="flex flex-col gap-2">
  <Label htmlFor="email">メールアドレス</Label>
  <Input
    id="email"
    aria-invalid={!!errorMessage}
  />
  <p className="text-sm text-destructive">{errorMessage}</p>
</div>

Field / FieldError と組み合わせる場合は Fieldのドキュメントを参照してください。

ボタン付き入力

<div className="flex">
  <Input placeholder="メールアドレス" className="rounded-r-none" />
  <Button variant="primary" className="rounded-l-none">購読</Button>
</div>

実際の使用例

検索フォーム

<div className="flex gap-2">
  <InputGroup className="flex-1">
    <InputGroupAddon align="inline-start">
      <Icon name="Search" size="sm" />
    </InputGroupAddon>
    <InputGroupInput placeholder="キーワードを入力..." />
  </InputGroup>
  <Button>検索</Button>
</div>

パスワード確認フォーム

新しいパスワード

パスワード（確認）

<div className="space-y-4">
  <div className="space-y-2">
    <Label htmlFor="new-password">新しいパスワード</Label>
    <Input id="new-password" type="password" />
  </div>
  <div className="space-y-2">
    <Label htmlFor="confirm-password">パスワード（確認）</Label>
    <Input id="confirm-password" type="password" />
  </div>
  <Button variant="primary" className="w-full">パスワードを変更</Button>
</div>

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'filled' \| 'ghost' \| 'underline'`	`'default'`	スタイルバリアント
`type`	`'text' \| 'email' \| 'password' \| 'number' \| 'search' \| ...`	`'text'`	入力タイプ
`placeholder`	`string`	`-`	プレースホルダーテキスト
`disabled`	`boolean`	`false`	無効状態
`aria-invalid`	`boolean`	`-`	エラー状態（trueで赤枠のborder/ringが自動適用される。ネイティブ属性）
`className`	`string`	`-`	追加のCSSクラス

Input

On this page