Checkbox

素の input に乗っています

読み上げ・キーボード・フォームへの載り方は、どれもブラウザが持っています。 差し替えているのは見た目だけです。

入った印は兄弟の要素に置いて重ねています（input の中に要素は置けません）。 出し入れは CSS の peer-checked: なので、このコンポーネントは状態を持ちません。

持たせると、値の出どころが input とこのコンポーネントの2つになります。 いまは input だけが値を持つので、素のフォームでも react-hook-form の register() でも、そのまま載ります。

ラベルは Field が付けます

ラベルを自分では持っていません。 持つと結びつけの経路が2つになり、 片方だけ直したときにずれます。

ラベルが右に来る配置は Field が持っています。

<Field layout="inline" id="terms" label="利用規約に同意する">
  <Checkbox />
</Field>

チェックの印は塗りを宣言しています

bg-accent のような塗るだけの道はありません。塗りは宣言するもので、 宣言すると背景と前景が対で決まります——中の印は文字色を継ぐので、読める側になります。

押せないときだけ段が落ちます。宣言は CSS では差し替えられませんが、 disabled は描くときに分かるので、そこで分けています。