FormControl

フォームフィールドのラベル、ヘルパーテキスト、エラーメッセージを一貫して管理するラッパーコンポーネント。

基本的な使い方

Preview

必須フィールド

required propを使用すると、ラベルに赤いアスタリスク（*）が表示されます。

Preview

ヘルパーテキスト

フィールドの説明や補足情報を表示できます。

Preview

エラー表示

error propを true にすると、エラーメッセージが表示されます。

Preview

無効状態

disabled propで、フィールド全体を無効化できます。

Preview

他のフォームコンポーネントと組み合わせ

FormControlは、Input以外のフォームコンポーネントとも使用できます。

Textareaとの組み合わせ

Preview

Selectとの組み合わせ

Preview

Props

Prop	Type	Default	Description
`label`	`string`	-	フィールドのラベル
`htmlFor`	`string`	-	ラベルのfor属性（入力フィールドのidと一致させる）
`helperText`	`string`	-	ヘルパーテキスト（補足情報）
`errorMessage`	`string`	-	エラーメッセージ
`error`	`boolean`	`false`	エラー状態
`required`	`boolean`	`false`	必須フィールド（ラベルに*を表示）
`disabled`	`boolean`	`false`	無効状態
`className`	`string`	-	追加のCSSクラス

アクセシビリティ

セマンティックHTML: <label> 要素を使用
htmlFor属性: ラベルとフォームフィールドを正しく関連付け
エラー状態: エラーメッセージを明確に表示
必須フィールド: 視覚的に必須フィールドを示す（*マーク）
無効状態: 無効なフィールドを明確に示す

使用例

フルフォームの実装例:

import { FormControl, Input, Textarea, Button } from '@codeconnect-llc/design-system'
import { useState } from 'react'

export function ContactForm() {
  const [errors, setErrors] = useState({})

  const handleSubmit = (e) => {
    e.preventDefault()
    // バリデーション処理
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <FormControl
        label="お名前"
        htmlFor="name"
        required
        error={!!errors.name}
        errorMessage={errors.name}
      >
        <Input id="name" type="text" />
      </FormControl>

      <FormControl
        label="メールアドレス"
        htmlFor="email"
        required
        error={!!errors.email}
        errorMessage={errors.email}
        helperText="返信先のメールアドレス"
      >
        <Input id="email" type="email" />
      </FormControl>

      <FormControl
        label="メッセージ"
        htmlFor="message"
        required
        error={!!errors.message}
        errorMessage={errors.message}
      >
        <Textarea id="message" rows={6} />
      </FormControl>

      <Button type="submit" variant="primary" size="lg">
        送信
      </Button>
    </form>
  )
}