Radio

ラジオボタンコンポーネントです。CheRadioGroup で囲み、複数の選択肢から1つを選択するために使用します。

基本

<CheRadioGroup name="group">
  <CheRadio value="a" size="medium">
    テキスト
  </CheRadio>
  <CheRadio value="b" size="small">
    テキスト
  </CheRadio>
</CheRadioGroup>

選択状態

defaultValue で初期選択を指定できます。

<CheRadioGroup name="group" defaultValue="a">
  <CheRadio value="a">テキスト</CheRadio>
</CheRadioGroup>

無効状態

CheRadioGroup に disabled を指定するとグループ全体を無効化できます。 基本・選択状態の各セクションに disabled バリエーションが含まれています。

<CheRadioGroup name="group" disabled>
  <CheRadio value="a">テキスト</CheRadio>
</CheRadioGroup>

エラー状態

CheRadio に error でエラースタイルを適用できます。

<CheRadioGroup name="group">
  <CheRadio value="a" error>
    テキスト
  </CheRadio>
</CheRadioGroup>

ボックス付き

boxed でボーダー付きのボックススタイルを適用できます。

<CheRadioGroup name="group">
  <CheRadio boxed value="a">
    テキスト
  </CheRadio>
  <CheRadio boxed value="b">
    テキスト
  </CheRadio>
</CheRadioGroup>

ボックス付き（長文）

boxed + className で幅を指定すると長文テキストに対応できます。

<CheRadioGroup name="group" defaultValue="a" direction="vertical">
  <CheRadio boxed value="a" className="w-[272px] max-w-[640px]">
    ダミーテキストは、デザインの作成時に使用される仮の文章です。
  </CheRadio>
</CheRadioGroup>

グループ（横並び）

CheRadioGroup で複数の CheRadio を囲むと、横並びのラジオグループになります。デフォルトの direction は "horizontal" です。

<CheRadioGroup name="group" defaultValue="a">
  <CheRadio value="a">テキスト</CheRadio>
  <CheRadio value="b">テキスト</CheRadio>
  <CheRadio value="c">テキスト</CheRadio>
</CheRadioGroup>

グループ（縦並び）

direction="vertical" で縦並びレイアウトに切り替えられます。

<CheRadioGroup name="group" defaultValue="a" direction="vertical">
  <CheRadio value="a">テキスト</CheRadio>
  <CheRadio value="b">テキスト</CheRadio>
  <CheRadio value="c">テキスト</CheRadio>
</CheRadioGroup>

グループ ボックス付き（横並び）

<CheRadioGroup name="group" defaultValue="a">
  <CheRadio boxed value="a">
    テキスト
  </CheRadio>
  <CheRadio boxed value="b">
    テキスト
  </CheRadio>
  <CheRadio boxed value="c">
    テキスト
  </CheRadio>
</CheRadioGroup>

グループ ボックス付き（縦並び）

<CheRadioGroup name="group" defaultValue="a" direction="vertical">
  <CheRadio boxed value="a">
    テキスト
  </CheRadio>
  <CheRadio boxed value="b">
    テキスト
  </CheRadio>
  <CheRadio boxed value="c">
    テキスト
  </CheRadio>
</CheRadioGroup>

すべてのバリエーション

すべてのバリエーション一覧は カタログページ を参照してください。

CheRadioGroup Props

CheRadio Props