フォームを作るとき「制御・非制御」コンポーネントに関する知識は必須です。デザインシステムを作成するにあたり、どちらを採用するか検討されたこともあるかと思います。https://ja.reactjs.org/docs/forms.html#controlled-componentshttps://ja.reactjs.org/docs/uncontrolled-components.html「制御・非制御」コンポーネントの差分を一言でまとめると、次のとおりです。実装が実現できる人気のライブラリです。「非制御コンポーネント」として作成された<Checkbox>コンポーネントの例を見てみましょう。/>;一方「制御コンポーネント」として作成された<Checkbox>コンポーネントの例を見てみましょう。制御コンポーネントを扱うとき、<Controller>コンポーネントやuseControllerフックを中継する必要があります。冗長ですが、外部ライブラリなど、デザインシステムがそもそも制御コンポーネントで作られていた場合、選択肢はこちらしかありません。)}/>;例外的に、制御・非制御を併用するケースもありますが、できることなら「非制御コンポーネント」として、デザインシステムを揃えたいところです。使用する前提であっても、やむをえない理由で「制御コンポーネント」を作ってしまうことがあります。使用している「やむをえない理由」のほとんどが、見た目の制御を、内部ロジックに委ねていることが原因かと思います。次のようなコードで、チェックされて「いる・いない」を切り替えたことが、誰しも経験したことがあるのではないでしょうか。制御コンポーネント縛り以前の問題を、このコンポーネントは抱えています。"none"で消している点です。"none"を使用してしまうと、アクセシビリティツリーから要素が除外され、支援技術から操作不能になってしまいます。これは望ましいものではないでしょう。getByRole("checkbox")で要素を特定できないことはもちろん、toBeCheckedマッチャーも使用できません。後続のテストコードは、苦しいものになることが予想されます。必要だったのか再検討するもし求めているものが「見た目の制御」のみならば、useStateやuseRefは不要です。見た目の制御に「制御・非制御」を気にする必要はないということです。マークアップのみで構成されています。<label>の「Check!」をクリックすると、すこし離れた箇所にある「●」<span>の色が変わる様子が確認できます。擬似要素「::after」を利用して装飾を施す擬似クラス「:checked」など、状態に応じてスタイルを上書きという実装をしています。+」をもって装飾領域を拡張している点がポイントです。擬似クラス「:checked」に相当する、状態起因のセレクターを応用することで、さまざまなスタイルを施すことができます。Checkbox独自デザインの<Checkbox>コンポーネントです。タブキーによる移動・スペースキーによるチェックも操作できます。0の<input>要素を覆いかぶせており、その要素が反応しています。Switchこちらは<Switch>コンポーネントを想定したものです。差分は、role="switch"ぐらいです。