CSS Summoner

Component Docs

Form コンポーネント

フォーム関連のベーススタイル。フォーム要素のベースとなるスタイルを定義します。 .form-base

バリアント

Checkbox

.form-checkbox

カスタムスタイルのチェックボックス。オン/オフの選択に使用します。

Input

.form-input

テキスト入力フィールドのベーススタイル。テキスト、メール、番号、パスワードなどの入力に使用します。

Radio

.form-radio

カスタムスタイルのラジオボタン。複数の選択肢から1つを選ぶ場合に使用します。

Search

.form-search

検索用の入力フィールド。虫眼鏡アイコン付きで検索機能を視覚的に示します。

Select

.form-select

ドロップダウン選択フィールド。オプションから1つを選ぶ場合に使用します。

Switch

.form-switch

トグルスイッチコンポーネント。オン/オフの切り替えをビジュアル的に表現します。

Textarea

.form-textarea

複数行テキスト入力フィールド。コメント、説明文など長文入力に使用します。

使用例


							
								<div class="form-field"><label for="sample-input" class="form-label">入力 (Input)</label><input id="sample-input" type="text" class="form-base form-base form-input form-sm theme-primary" placeholder="テキストを入力" color="theme-primary"/>

</div>
							
						

							
								<div class="form-field"><label for="sample-textarea" class="form-label">テキストエリア</label><textarea id="sample-textarea" class="form-base form-base form-textarea form-sm theme-primary" rows="4" placeholder="複数行のテキストを入力" color="theme-primary"></textarea></div>
							
						

							
								<div class="form-field"><label for="sample-select" class="form-label">選択 (Select)</label><select id="sample-select" class="form-base form-base form-select form-sm theme-primary" color="theme-primary"><option value="">項目を選択</option><option value="1">選択肢1</option><option value="2">選択肢2</option><option value="3">選択肢3</option></select></div>
							
						

							
								<div class="form-field-inline"><input id="sample-checkbox" type="checkbox" class="form-base form-base form-checkbox form-sm theme-primary" color="theme-primary"/><label for="sample-checkbox" class="form-label-inline">チェックボックス</label></div>
							
						

							
								<div class="form-field-inline"><input id="sample-radio" type="radio" class="form-base form-base form-radio form-sm theme-primary" color="theme-primary" name="sample-radio-group"/><label for="sample-radio" class="form-label-inline">ラジオボタン</label>

</div>
							
						

							
								<div class="form-field-inline"><div class="form-base form-base form-switch form-sm theme-primary"><input type="checkbox" class="form-switch-input" id="sample-switch" color="theme-primary"/><label class="form-switch-label" for="sample-switch"></label></div><label for="sample-switch" class="form-label-inline">スイッチ</label></div>
							
						

							
								<div class="form-field"><label for="sample-search" class="form-label">検索フォーム</label><div class="form-search-container"><input id="sample-search" type="search" class="form-base form-base form-search form-sm theme-primary" placeholder="検索キーワードを入力" color="theme-primary"/><span class="form-search-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="text-current w-5 h-5"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path></svg></span></div></div>

Component Docs

← back to css-summoner