ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

Checkboxの各プロパティの解説

MUIでのCheckboxの扱い方の説明です。
毎度おなじみHTMLのチェックボックスがちょっとかっこよくなります。
const Checkbox = MaterialUI.Checkbox;
ReactDOM.render(
  <Checkbox />
, document.getElementById('sample')
);

checked

Checkboxのcheckedの使い方の説明です。
チェックボックスときにチェックを入れるかの設定ができます。
設定できる値はtrue、falseです。
未設定のデフォルトはfalseときになります。
ここときに値をいれるとReact側の管理ときになります。
つまりユーザー側からは変更できません。
React側が管理しない(コントロールしない)場合はdefaultCheckedを使用します。
サンプルの1つ目はtrueときに設定しています。クリックしてもfalseときにはなりません。
2つ目はfalseときに設定しています。クリックしてもfalseときにはなりません。
2つ目は未設定なのでチェックははいりません。そしてユーザー側でチェックを入れることができます。
const Checkbox = MaterialUI.Checkbox;
ReactDOM.render(
<div>
  <Checkbox checked={true} />
  <Checkbox checked={false}  />
  <Checkbox />
</div>
, document.getElementById('sample')
);

checkedIcon

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

classes

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

color

Checkboxのcolorの使い方の説明です。
チェックがはいったときの背景色を設定できます。
テーマの色を指定します。
使えるのはprimary、secondary、error、info、success、warning、default、そして自分で設定した色です。
未設定のデフォルトはprimaryです。
defaultはテーマのモードときに依存します。
モードがライト(mode:light)の場合はgrey[100]が、モードがダーク(mode:dark)の場合grey[900]が使用されます。
const Checkbox = MaterialUI.Checkbox;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
const TukuttaDiv = () => <div>▼</div>;
ReactDOM.render(
<div>
  <Checkbox color="primarychecked={true}/>
  <Checkbox color="secondarychecked={true}/>
  <Checkbox color="errorchecked={true}/>
  <Checkbox color="infochecked={true} />
  <Checkbox color="successchecked={true} />
  <Checkbox color="warningchecked={true} />
  <Checkbox color="default" checked={true} />
  <Checkbox checked={true} />
</div>
, document.getElementById('sample')
);

defaultChecked

CheckboxのdefaultCheckedの使い方の説明です。
ユーザー側で自由ときにチェックを変更できるようときにしたい場合ときに使用します。
React側が管理する(コントロールする)場合はcheckedを使用します。
サンプルの1つ目はtrueなのでチェックが入っています。ユーザー側がチェックを外すことができます。
2つ目はfalseなのでチェックが入っていません。ユーザー側がチェックすることができます。
const Checkbox = MaterialUI.Checkbox;
ReactDOM.render(
<div>
  <Checkbox defaultChecked={true} />
  <Checkbox defaultChecked={false}  />
</div>
, document.getElementById('sample')
);

disabled

Checkboxのdisabledの使い方の説明です。
チェックボックスを使用不可ときにします。
設定できる値はtrueとfalseです。
falseときにして使用不可ときになると全体が薄い灰色ときになります。
未設定のデフォルトはfalseです。
サンプルの1つ目はtrueなので全体が薄い灰色ときになっています。
2つ目はfalseなので通常と一緒です。
const Checkbox = MaterialUI.Checkbox;
ReactDOM.render(
<div>
  <Checkbox disabled={true} />
  <Checkbox disabled={false}  />
</div>
, document.getElementById('sample')
);

disableRipple

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

icon

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

id

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

indeterminate

Checkboxのindeterminateの使い方の説明です。
不確定状態(indeterminate)のときにしたいときに設定します。
なにを言ってるんだこいつはという感じですが、チェックをいれる・いれないをまだ決めていないよ状態の場合です。
例えば、はい(チェック有り)かいいえ(チェック無し)を必ず選んでくださいというときに初期表示として全てを不確定状態(indeterminate)にしておきます。
公式MUIのサンプル(https://mui.com/components/checkboxes/#indeterminate)では親チェックボックスで使用され複数ある子チェックボックスの一部ときにチェックがはいっているときに親チェックボックスをこのindeterminateを使用する例があります。
サンプルの1つ目はtrueなので不確定状態のハイフンが表示されています。
const Checkbox = MaterialUI.Checkbox;
ReactDOM.render(
<div>
  <Checkbox indeterminate={true} />
  <Checkbox indeterminate={false}  />
</div>
, document.getElementById('sample')
);

indeterminateIcon

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

inputProps

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

inputRef

省略
最終的に生成されるINPUT要素へrefを渡せます。

onChange

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

required

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

size

Checkboxのsizeの使い方の説明です。
small、medium、もしくは定義した文字列を設定できます。
正直大きさの違いが微妙過ぎて使い分けに悩みます。2倍ぐらい大きいlargeを用意したほうがいいのでは?
未設定のデフォルトはmediumです。
const Checkbox = MaterialUI.Checkbox;
ReactDOM.render(
<div>
  <Checkbox size="small" />
  <Checkbox size="medium" />
</div>
, document.getElementById('sample')
);

sx

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

value

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

全体目次