Input

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

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

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

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

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

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

<div className="flex flex-col gap-2">
  <Label htmlFor="email">メールアドレス</Label>
  <Input
    id="email"
    className="border-destructive focus-visible:ring-destructive"
  />
  <p className="text-sm text-destructive">有効なメールアドレスを入力してください</p>
</div>

<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>