KARAKURIDESIGN SYSTEM

Input

Inputは、ユーザーからテキストデータを収集するための基本的なフォーム要素です。 メール、パスワード、検索など、様々な種類のテキスト入力に対応します。

2
Variants
5
Sizes
2
Icon Slot
Field
Field

Playground

Preview
defaultD
Variant
Size
Radius
Icon
State
Field
Focus
<Input placeholder="Type here..." />

Variants

Default
標準的なボーダースタイル。フォームの一般的な入力欄に使用。
一般的なフォーム
Filled
背景色付きスタイル。視覚的に目立たせたい入力欄に。
検索バー、主要入力

Sizes

xs
高さ36px
横パディング12px
フォント13px
アイコン14px
sm
高さ40px
横パディング12px
フォント14px
アイコン14px
default
高さ44px
横パディング16px
フォント16px
アイコン16px
lg
高さ48px
横パディング16px
フォント16px
アイコン16px
xl
高さ56px
横パディング16px
フォント16px
アイコン16px

タッチターゲット: WCAG 2.5.8基準では最小24pxのタッチ領域が必要です。 最小のxs（36px）でもWCAG基準を満たしています。

iOS Safari対応: フォントサイズ16px以上でiOS Safariの自動ズームを防止できます。default以上のサイズは16pxフォント・16pxアイコンを使用しています。

Features

With Icons

States

Default通常

0/50

Errorエラー
Disabled無効

フォーカスStates

focusRing: false（デフォルト）: クリック時はボーダー変化のみ、キーボードTab時はフォーカスリング自動表示。focusRing: true: 常にフォーカスリングを表示。

API

Props

variant"default"
"default" | "filled"

インプットの視覚スタイル

size"default"
"xs" | "sm" | "default" | "lg" | "xl"

インプットの高さ (36/40/44/48/56px) - Input専用スケール

radius"default"
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

角丸のサイズ (6px)

leftIconundefined
ReactNode

左側アイコン

rightIconundefined
ReactNode

右側アイコン

focusRingfalse
boolean

カスタムフォーカスリング表示。falseでもキーボード操作時は自動表示

errorundefined
boolean

エラーStates（赤いボーダー）

disabledundefined
boolean

無効States

placeholderundefined
string

プレースホルダーテキスト

typeundefined
string

インプットタイプ (text, email, password, etc.)。HTMLデフォルト: text

Field

errorfalse
boolean

エラー状態。FieldError と Input に自動伝播

disabledfalse
boolean

無効状態。FieldLabel と Input に自動伝播

gap"default"
"none" | "xs" | "sm" | "default" | "lg"

子要素間の間隔 (0 / 4 / 6 / 8 / 12px)

FieldLabel

requiredfalse
boolean

必須マーク（*）をラベル末尾に表示