sashigane
コンポーネント

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 は 署名に現れないので、表に出すと「引数のデフォルトが書かれているものだけ」になり、嘘になります。

On this page