同意チェック
フォーム ／ パターン集トップ
ポリシーへのリンクは label の外に出し、チェック操作との衝突を避ける
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<!-- 同意も1つの項目なので、ほかの欄と同じ .field と .field__error に乗せる。
data-error は、ラベルから定型で作れない文言を欄の側に持たせるためのもの -->
<div class="consent-block field">
<p class="consent-block__policy" id="cb-note">送信の前に、
<a href="/privacy" target="_blank" rel="noopener">プライバシーポリシー（別タブで開く）</a>をご確認ください。</p>
<div class="consent-block__row">
<input class="consent-block__input" type="checkbox" id="cb-agree" name="agree"
required aria-describedby="cb-note cb-agree-msg"
data-error="プライバシーポリシーへの同意が必要です">
<label class="consent-block__label" for="cb-agree">プライバシーポリシーに同意する
<span class="req" aria-hidden="true">必須</span></label>
</div>
<p class="field__error" id="cb-agree-msg" hidden></p>
</div>.consent-block {
display: flex;
flex-direction: column;
gap: var(--space-2);
max-inline-size: 32rem;
}
.consent-block__policy {
margin: 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.consent-block__policy a {
color: var(--color-accent-text);
text-underline-offset: .2em;
}
.consent-block__row {
display: flex;
align-items: center;
gap: var(--space-3);
min-block-size: 2.75rem;
}
.consent-block__input {
inline-size: 1.5rem;
block-size: 1.5rem;
margin: 0;
flex-shrink: 0;
accent-color: var(--color-accent-text);
}
.consent-block__input:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.consent-block__label {
padding-block: var(--space-2);
cursor: pointer;
}
/* 未同意のときだけ文字が入る。ほかの欄のエラー文と同じ名前・同じ姿にする */
.field__error {
margin: 0;
font-size: var(--text-sm);
color: var(--color-danger);
}
.req {
font-size: var(--text-sm);
color: var(--color-text-muted);
}確認する#
- ポリシーへのリンクが label の外にある（リンクを押してもチェックが切り替わらない）
- 初期状態でチェックが入っていない
- 未同意のときは欄のそばに文字でエラーを出す（送信ボタンの disabled で黙らせない）
- エラー文の置き場が .field__error で、ほかの欄と同じ名前になっている