エンツォ・マヌエル・マンガノの素晴らしい記事が呼ばれています チェックボックスインタラクション – レイアウトアニメーションの美しさ。最終的には、基本的には、いくつかのうまくアニメーション化されたチェックボックスを取得します。

私はそれが好きです。

それは非常に明確なUXを備えたモダンな見た目の複数選択です。

EnzoのチュートリアルはすべてReact Nativeifiedです。エンツォは反応のネイティブの男だと思いますが、それが彼のことです。そして、それは大丈夫で、理にかなっています。このような多くの時間は、そのような治療に値する非常にダイナミックなWebアプリの一部であり、そのスタイルのコードを採用してそれを支援することは問題ありません。

しかし、私は誰にもそれがそうだと思わせたくありません 必要 このようなものを作成するために、Reactネイティブのようなツールに手を伸ばします。これは実際には、非常にパフォーマンスがあり、意味的で、アクセス可能であるシンプルなHTML＆CSSです。

これらの「ボタン」のそれぞれは、本当にこれです：

各ボタンは本当にです label、それから、ラベルのテキストをアクセス可能な方法でチェックボックスに適切に接続しているからです。私はこれのためにエンツォを呼びます：彼の最後のデモ出力

s and s、それをタブすることさえできないので、それはかなりアクセスできない最終結果です。

ラベルの場合、全体が「クリック可能」になり、内部のチェックボックスを切り替えます。

実際のチェックボックスを非表示にすることができます（UIが実際に表示されないことに注意してください） アクセス可能なScreenReaderのみのクラス。しかし、それらはそれぞれインタラクティブな要素のままであるため、タブを付けることができます。しかし、できないからです 見る 彼ら、私たちはすべきです…

label {
  cursor: pointer;

  &:focus-within {
    outline: 3px solid orange;
  }
}

これにより、それらのいずれかが焦点を合わせているときに視覚的な指標があることを保証します。そして、その焦点により、SpaceBarは通常のチェックボックスと同様にそれらをアクティブにするように機能します。

楽しい ただし、オプションのいずれかをアクティブにするためのきちんとした相互作用は、チェックボックスをアニメーション化し、いくつかの色を変更するきちんとした相互作用です。簡単です！約束します！ラベルにチェックされた入力があるかどうかを確認し、それらの変更を行います。 CSSでは大丈夫です。

label {
  --highlightColor: oklch(0.764 0.1924 65.38);

  cursor: pointer;
  border: 1px solid white;

  &:focus-within {
    outline: 3px solid var(--highlightColor);
  }

  svg {
    width: 0;
    transition: width 0.66s;
    fill: var(--highlightColor);
  }
  
  &:has(:checked) {
    border-color: var(--highlightColor);
    background: color-mix(in srgb, var(--highlightColor), transparent 80%);

    svg {
      width: 0.88lh;
    }
  }
}

完成したデモ、エンツォと同じ経験にほぼ100％近いと思います。乾杯！