執筆中のため、情報が古い・足りない場合があります。ご容赦ください。
インプット
inputタグ, textareaタグ等に装飾を施すコンポーネントを提供します。
標準
<div class="vstack">
<input class="input-field" type="text" placeholder="名前を入力..." />
<input class="input-field ghost" type="text" placeholder="名前を入力..." />
<input class="input-field" type="text" placeholder="名前を入力..." disabled />
</div>ラベル付き
<label class="input-field">
<input type="text" placeholder="海老瀬 瑠愛" />
</label>
<label class="input-field">
<input type="number" value="18" />
</label>
<label class="input-field">
<input type="date" />
</label>テキストエリア
<div class="vstack">
<textarea class="input-field"></textarea>
<textarea disabled class="input-field"></textarea>
</div>グルーピング
<div class="vstack">
<div class="hgroup">
<label class="input-label">https://</label>
<input class="input-field" type="text" placeholder="google.com" />
</div>
<div class="hgroup">
<input class="input-field" type="number" value="0" />
<label class="input-label">円</label>
</div>
<div class="hgroup">
<input class="input-field" type="text" placeholder="検索ワードを入力してください…" />
<button class="btn primary"><i class="fas fa-search"></i></button>
</div>
</div>その他
<div class="vstack">
<input class="input-field" type="file" />
<input class="input-field" type="color" />
</div>