ふかしぎのReactさんぷるず

Radioの解説 Componet API - MUI v5 API - Reactさんぷるず

最終更新 2022/04/07
MUI v5の各機能の説明です。
対象のMUIのバージョンは v5.5.2 です。
ここでは初心者向けの基本的な説明をしています。

使用するための下準備

お約束です。取り込まないと使えません。
インポートならば
import { Radio } from '@mui/material';
CDNで使いたいのなら<script>でMUIを読み込んだ後に
const Radio  = MaterialUI.Radio;
で使用できるようになります。
CDNでの詳しいやり方はこちらに移動してください。

Radioの各プロパティの解説

MUIでのRadioの扱い方の説明です。
ラジオボタンです。
const Radio = MaterialUI.Radio;
ReactDOM.render(
<Radio />
, document.getElementById('sample')
);
基本的にRadioGroupの子要素として使います。
FormControlLabelを使うとラベル付きのラジオボタンが作れます。

checked

Radioのcheckedの使い方の説明です。
チェックした状態にするかの設定です。
trueでチェックした状態になります。
デフォルトはfalseです。
サンプルは直接ブール値を設定しているためクリックしてもオン・オフの変化しません。
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
<Radio checked={true} />
<Radio checked={false} />
</div>
, document.getElementById('sample')
);

checkedIcon

RadioのcheckedIconの使い方の説明です。
選択した際に表示するアイコンを設定します。
ノードを設定できます。
デフォルトは「<RadioButtonIcon checked />」が表示されます。
未選択のアイコンはiconで設定します。
サンプルはクリックしたら●の代わりに「チェ」という文字を表示します。
const Radio = MaterialUI.Radio;
const chekku = <div>チェ</div>;
ReactDOM.render(
<div>
<Radio checkedIcon={chekku} />
</div>
, document.getElementById('sample')
);

classes

Radioのclassesの使い方の説明です。
CSSの設定を上書きします。

color

Radioのcolorの使い方の説明です。
ラジオボタンの色を設定できます。
テーマの色を指定します。
使えるのはprimary、secondary、error、info、success、warning、そして自分で設定した色です。
未設定のデフォルトはprimaryです。
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
  <Radio color="primarychecked={true} /><span>primary</span>
  <Radio color="secondarychecked={true} /><span>secondary</span>
  <Radio color="errorchecked={true} /><span>error</span>
  <Radio color="infochecked={true} /><span>info</span>
  <Radio color="successchecked={true} /><span>success</span>
  <Radio color="warningchecked={true} /><span>warning</span>
</div>
, document.getElementById('sample')
);

disabled

Radioのdisabledの使い方の説明です。
trueにするとラジオボタンをチェック不可にします。
うすい灰色になりチェックできなくなります。
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
  <Radio color="primarydisabled={true} checked={true} />
  <Radio color="primarydisabled={true} checked={false} />
</div>
, document.getElementById('sample')
);

disableRipple

RadioのdisableRippleの使い方の説明です。
ラジオボタンをクリックしたときにぽわんと波模様が出すか出さないかの設定をします。
設定できる値はtrueとfalseです。
falseにすると波模様が出なくなります。
未設定のデフォルトはfalseです。
サンプルの1つ目はtrueなのでクリックしても波模様が出なくなります。
2つ目はfalseなので波模様が出ます。
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
  <Radio disableRipple={true} />
  <Radio disableRipple={false} />
</div>
, document.getElementById('sample')
);

icon

Radioのiconの使い方の説明です。
未選択のラジオボタンの時に表示するアイコンを設定できます。
未設定のデフォルトは<RadioButtonIcon />が表示されます。
ノードを指定できます。
チェックが入っているときはcheckedIconを使用します。
サンプルの1つ目はチェックが入っていないときに自作の十字SVGを表示します。
ノードを指定できるので画像でなくてもかまいません、2つ目はDIVで未を表示しています。
const Radio = MaterialUI.Radio;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const TukuttaDiv = () => <div>未</div>;
ReactDOM.render(
<div>
  <Radio icon={<TukuttaIcon /> } />
  <Radio icon={<TukuttaDiv />  } />
</div>
, document.getElementById('sample')
);

id

Radioのidの使い方の説明です。
HTMLのidと一緒なので省略

inputProps

RadioのinputPropsの使い方の説明です。
最終的に生成されるHTMLのINPUT要素の属性を設定できます。
サンプルはinputPropsで最終的に生成されるINPUT要素のtitle属性を設定しています。
チェックボックスの上にマウスをおいて暫くすると設定した「inputPropsでタイトルを設定」がポップアップします。
開発ツールのElementでこの箇所を確認するとINPUT要素にtitle属性が付け加えられているのが確認できます。
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
  <Radio inputProps={{"title":"inputPropsでタイトルを設定"}} />
</div>
, document.getElementById('sample')
);

inputRef

RadioのinputRefの使い方の説明です。
最終的に生成されるINPUT要素へrefを渡せます。

name

Radioのnameの使い方の説明です。
最終的に生成されるINPUT要素のnameを設定できます。

onChange

RadioのonChangeの使い方の説明です。
INPUT要素のonChangeと同じです。
event.target.checkedでチェックの状態がわかります。
サンプルではクリックするとアラートウインドを出しチェック状態と値を表示します
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
  <Radio onChange={(event)=>{alert('変更されました。状態は'+event.target.checked+'。値は'+event.target.value)}} value="ラジオボタンの値" />
</div>
, document.getElementById('sample')
);

required

Radioのrequiredの使い方の説明です。
必須かどうかの設定ができます。
この設定があると最終的に生成されるINPUT要素にrequiredが追加されます。
開発ツールのElementでこの箇所を確認するとINPUT要素にrequired属性が付け加えられているのが確認できます。
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
  <Radio required={true} />
</div>
, document.getElementById('sample')
);

size

Radioのsizeの使い方の説明です。
small、medium、もしくは定義した文字列を設定できます。
未設定のデフォルトはmediumです。
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
  <Radio size="small" /><span>small</span>
  <Radio size="medium" /><span>medium</span>
</div>
, document.getElementById('sample')
);

sx

Radioのsxの使い方の説明です。
他のコンポーネントと共通のプロパティのため別ページにまとめました。
sxの解説に移動してください。

value

Radioのvalueの使い方の説明です。
最終的に生成されるINPUT要素のvalue属性に設定されます。
サンプルの1つ目は単純にvalueに1を設定しています。開発ツールのElementを見ると最終的に生成されたINPUT要素にvalue="1"が付け加えられているのがわかります。
2つ目はonChangeをつかってチェックをいれたらアラートウインドを表示しvalueの値を表示します。event.target.valueで値を取得できます。
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
  <Radio value="1" />
  <Radio value="2"  onChange={(event)=>{alert('値は'+event.target.value)}} />
</div>
, document.getElementById('sample')
);
menu

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
sxの解説
マテリアルアイコンの解説
Autocomplete
Avatar
AvatarGroup
Badge
Button
ButtonGroup
Checkbox
Chip
Collapse
Divider
Floating Action Button(Fab)
Fade
FormControlLabel
Grow
Icon
List
ListItem
ListItemAvatar
ListItemButton
ListItemIcon
ListItemSecondaryAction
ListItemText
ListSubheader
Radio
RadioGroup
Rating
Select
Slide
Slider
Switch
TextField
ToggleButton
ToggleButtonGroup
Zoom
エラー対処
HTMl select
戻る

全体目次