コンポーネント
Radio
ラジオボタン。複数の選択肢から1つだけ選ぶ
グループのラベルが要ります
1つずつのラベル(「ふつう」「大きい」)だけでは、 何についての選択なのかが読み上げに出ません。
グループのラベルは fieldset と legend でしか作れません。div に aria-label を足す形も
動きますが、legend は選択肢を読むたびにグループのラベルを添えます。
<RadioGroup id="plan" label="プラン">
<Field layout="inline" id="plan-a" label="ふつう">
<Radio name="plan" value="a" />
</Field>
<Field layout="inline" id="plan-b" label="大きい">
<Radio name="plan" value="b" />
</Field>
</RadioGroup>name は利用側が渡します
グループから配っていません。配るにはコンテキストが要り、 このコンポーネントがクライアント側になります。 いまはどのコンポーネントもサーバ側で描けます。
name が揃っていないと、全部が独立に選べる状態になります。
これはテストが測っています。
誤りはグループに付きます
選ばれていないのは選択肢1つの問題ではないので、1つずつに赤い線を引いても どれを直せばよいか伝わりません。
3つの状態
通常・空・エッジケースの3つは、どのコンポーネントにも必ずあります。
通常default.tsx
通常。グループのラベルは RadioGroup が付ける。
空empty.tsx
空。グループもラベルも無い、ラジオ1つだけ。
エッジケースedge.tsx
エッジケース。押せない選択肢と、グループに対する誤り。
props
Prop
Type
型と説明はコンポーネントのソースから抽出しています。既定値は出していません——cva の defaultVariants は 署名に現れないので、表に出すと「引数のデフォルトが書かれているものだけ」になり、嘘になります。