フォーム
このページの汎用的なパターンを組み合わせることで、多くのフォームを構成できます。
表示見本
リファレンス
| 属性名 | 用途 | 値 |
|---|---|---|
.xs |
最小幅の入力欄 | max-width: 56px |
.sm |
小さめの入力欄 | max-width: 100px |
標準 |
通常の入力欄 | max-width: 250px |
.lg |
大きめの入力欄 | max-width: 350px |
.xl |
最大幅の入力欄 | max-width: 500px |
.w-full |
親要素いっぱいに広げる | max-width: 100% |
.auto |
内容に応じた幅にする | width: auto |
.is-error |
エラー状態 | 背景色・枠線をエラー色に変更 |
.is-disabled |
非アクティブ状態 | 操作不可・グレー表示 |
.line3 |
textarea 3行程度 | min-height: 92px |
.line5 |
textarea 5行程度 | min-height: 150px |
.line10 |
textarea 10行程度 | min-height: 300px |
.inputCheck |
checkbox / radio の見た目 | 18px × 18px |
.errorText |
エラーメッセージ | .is-error と連動して表示 |