Radix で、美しいチェックボックスを実装する

Radix とは

Radix は React 用のアクセシブルな UI コンポーネントのコレクションです。シンプルで使いやすく、デザインの自由度も高いことが特徴です。アクセシブルなコンポーネントを簡単に追加できるので、デザインに集中しつつ、ユーザーに優しいインターフェースを構築できます。

Radix の詳細はこちらから:

以下は、今回作成するチェックボックスの完成イメージです。

インストール

まずは必要なパッケージをインストールしましょう。

実装環境

• React 18+
• Radix UI (Checkbox)

チェックボックスの実装

以下のコードでは、Radix のチェックボックスコンポーネントを使って、「Fun」や「Serious」といった選択肢を持つチェックボックスを作成しています。

このコードを使用することで、クリックするたびにチェック状態がトグルされるチェックボックスを作成できます。Radix のチェックボックスコンポーネントはデフォルトでアクセシブルな設計になっており、視覚障がい者の方にも優しいインターフェースを提供します。

各コンポーネントの説明

• Checkbox.Root: チェックボックス全体を定義するコンポーネントです。この Root コンポーネントで、チェックのトグルや状態管理を行います。

• Checkbox.Indicator: チェックボックスがチェックされたときに表示される要素です。この中に CheckIcon を入れることで、チェックされた際に視覚的に分かりやすく表示されます。

• CheckIcon: Radix のアイコンコンポーネントです。チェックされたときに表示される「✔️」のような役割を果たします。

スタイリング

以下はチェックボックスのスタイリングに使用した CSS コードです。

• checkbox-container: 全体を中央に配置するためのコンテナスタイルです。
• checkbox-title: タイトル部分を太字で大きく表示しています。
• checkbox-group: 各チェックボックスを横並びに配置し、間にギャップを設定しています。
• checkbox-item: 各チェックボックスラベルに対するスタイルです。ホバー時に背景色が変わるなど、ユーザーに優しいフィードバックを与えています。
• checkbox-root: Radix のチェックボックス自体のスタイルで、シンプルなボックス状にしています。
• checkbox-indicator: チェックされた際に表示されるアイコン部分のスタイルです。色や背景を調整しています。

まとめ

Radix を使うと、アクセシブルでカスタマイズ可能なチェックボックスを簡単に実装できます。Checkbox.Root や Checkbox.Indicator を組み合わせて使用することで、洗練されたインターフェースを提供できるだけでなく、ユーザー体験も向上します。