Caroa UI

Field

ラベル・入力・エラーメッセージをまとめたフィールドコンポーネント。

インポート

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

基本的な使い方

Loading...
<Field label="メールアドレス">
  <Input type="email" placeholder="[email protected]" />
</Field>

必須マーク付き

Loading...
<Field label="名前" required>
  <Input placeholder="山田太郎" />
</Field>

エラー状態

Loading...
<Field label="パスワード" error="8文字以上で入力してください">
  <Input type="password" />
</Field>

ヘルプテキスト付き

Loading...
<Field label="ユーザー名" description="3文字以上で入力してください">
  <Input />
</Field>

フォーム例

Loading...
<div className="space-y-4">
  <Field label="メールアドレス" required>
    <Input type="email" placeholder="[email protected]" />
  </Field>
  <Field label="パスワード" required description="8文字以上で入力してください">
    <Input type="password" />
  </Field>
  <Field label="プロフィール" description="任意で入力してください">
    <Textarea placeholder="自己紹介をお書きください" />
  </Field>
  <Button className="w-full">登録</Button>
</div>

Props

PropTypeDefaultDescription
label*string-ラベルテキスト
requiredbooleanfalse必須マークを表示
errorstring-エラーメッセージ
descriptionstring-ヘルプテキスト

On this page