[MUI Tips][Checkbox] 不定状態を表現する

Checkbox

MUI Tips

2022.05.132022.05.25

この記事はこんな人におすすめ
環境
不定状態の基本
MUI Tips 一覧

この記事はこんな人におすすめ

MUI における Checkbox で不定状態を表現する方法を知りたい

公式サイトの情報はコチラ。

不定状態の例

環境

React: 17.0.2
MUI: 5.5.2

不定状態の基本

チェックボックスはチェック状態、未チェック状態の他に、そのどちらでもない「不定状態」を表すことができます。

不定状態とは、複数の項目がある中で、いくつかはチェックされていて、いくつかはチェックされていないという、どちらともつかない状態のことです。

不定状態を表すチェックボックスの書式は以下の通りです。

<Checkbox indeterminate={true} />

以下は、チェックボックスに不定状態を設定する例です。

import { FormGroup, FormControlLabel, } from '@mui/material';
import Checkbox from '@mui/material/Checkbox';

export default function CheckboxSample10() {
    return (
        <div>
            {/* Checkbox に不定状態を設定する例 */}
            <FormGroup row={true}>
                <FormControlLabel 
                    control={<Checkbox indeterminate={true} />} 
                    label="不定状態" />
            </FormGroup>
        </div>
    );
}

実行すると、下図のようにボックスにマイナスが表記されたチェックボックスが表示されます。

不定状態の例