Input

テキスト入力用のフォームコンポーネント

Basic

基本的なテキスト入力

With Label

ラベル付きの入力フィールド

Password

Sizes

3つのサイズオプション

Small

Medium

Large

States

様々な状態の入力フィールド

This field is required

Input Types

異なる入力タイプ

Text

Password

Number

URL

Controlled Input

値の制御

Controlled

Current value: (empty)

Usage

コンポーネントの使用例

tsx

class="token keyword">import { Input } class="token keyword">from class="token keyword">class="token string">"@/components/ui";
class="token keyword">import { useSignal } class="token keyword">from class="token keyword">class="token string">"@builder.io/qwik";

class="token keyword">class=class="token keyword">class="token string">"token comment">// Basic
<class="token tag">Input placeholder=class="token keyword">class="token string">"Enter text..." />

class="token keyword">class=class="token keyword">class="token string">"token comment">// With label
<class="token tag">Input label=class="token keyword">class="token string">"Email" class="token keyword">type=class="token keyword">class="token string">"email" />

class="token keyword">class=class="token keyword">class="token string">"token comment">// Sizes
<class="token tag">Input size=class="token keyword">class="token string">"sm" placeholder=class="token keyword">class="token string">"Small" />
<class="token tag">Input size=class="token keyword">class="token string">"md" placeholder=class="token keyword">class="token string">"Medium" />
<class="token tag">Input size=class="token keyword">class="token string">"lg" placeholder=class="token keyword">class="token string">"Large" />

class="token keyword">class=class="token keyword">class="token string">"token comment">// Error state
<class="token tag">Input error errorMessage=class="token keyword">class="token string">"Required field" />

class="token keyword">class=class="token keyword">class="token string">"token comment">// Controlled
class="token keyword">const value = class="token function">useSignal(class="token keyword">class="token string">"");
<class="token tag">Input
  value={value.value}
  onInput$={(v) => value.value = v}
/>

Props

コンポーネントのプロパティ

Prop	Type	Default	Description
type	"text" \| "email" \| "password" \| ...	"text"	入力タイプ
size	"sm" \| "md" \| "lg"	"md"	入力フィールドのサイズ
label	string	-	ラベルテキスト
error	boolean	false	エラー状態
onInput$	QRL<(value: string) => void>	-	入力ハンドラー