ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

ToggleButtonGroupの各プロパティの解説

MUIでのToggleButtonGroupの扱い方の説明です。
トグルボタンをグループ化するコンポーネントです。
const ToggleButton = MaterialUI.ToggleButton;
const ToggleButtonGroup = MaterialUI.ToggleButtonGroup;
ReactDOM.render(
<ToggleButtonGroup value="tb2">
  <ToggleButton value="tb1">トグルボタン1</ToggleButton>
  <ToggleButton value="tb2">トグルボタン2</ToggleButton>
</ToggleButtonGroup>
, document.getElementById('sample')
);

children

ToggleButtonGroupのchildrenの使い方の説明です。
子要素のトグルボタンを設定できます。
子要素のトグルボタンが複数ある場合は配列で渡します。
というかトグルの存在意義からしてひとつでは使わないので必ず配列になるでしょう。
const ToggleButton = MaterialUI.ToggleButton;
const ToggleButtonGroup = MaterialUI.ToggleButtonGroup;
const TukuttaToggleButton = [
  <ToggleButton value="tb1" key="k1">トグルボタン1</ToggleButton>,
  <ToggleButton value="tb2" key="k2">トグルボタン2</ToggleButton>
];
ReactDOM.render(
  <ToggleButtonGroup value="tb2" children={TukuttaToggleButton} />
, document.getElementById('sample')
);
上のサンプルは下のサンプルと同じ意味になります。
ただし下のサンプルはReactが内部で自動的に作っているのではなく手動で作っているでkeyを明示的に設定する必要があります。そうしないと
Warning: Each child in a list should have a unique "key" prop. 
と怒られます。
const ToggleButton = MaterialUI.ToggleButton;
const ToggleButtonGroup = MaterialUI.ToggleButtonGroup;
const TukuttaToggleButton = [
  <ToggleButton value="tb1" key="k1">トグルボタン1</ToggleButton>,
  <ToggleButton value="tb2" key="k2">トグルボタン2</ToggleButton>
];
ReactDOM.render(
  <ToggleButtonGroup value="tb2">
    {TukuttaToggleButton}
  </ToggleButtonGroup>
, document.getElementById('sample')
);

classes

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

color

ToggleButtonGroupのcolorの使い方の説明です。
色の設定はcolorで行います。
使えるのはstandard、primary、secondary、success、error、info、warning、それと自分で作った色です。
自分で色を作る場合は変数で定義しThemeProviderで適用します。
未設定のデフォルトはstandardになります。
standardはテーマのpalette.text.primaryが適用されます。標準で黒い文字に薄い灰色の背景になります。
const ToggleButton = MaterialUI.ToggleButton;
const ToggleButtonGroup = MaterialUI.ToggleButtonGroup;
const TextField = MaterialUI.TextField;
const ThemeProvider = MaterialUI.ThemeProvider;
const createTheme   = MaterialUI.createTheme;
const tukuttaTheme = createTheme({
  palette: {
    tukuttaIro: {
      main: '#ff00ff',
    },
  },
});
ReactDOM.render(
  <div>
    <div>
    <ToggleButtonGroup color="standardvalue="tb1">
      <ToggleButton value="tb1">トグルボタンstandard</ToggleButton>
      <ToggleButton value="tb2">トグルボタン2</ToggleButton>
    </ToggleButtonGroup>
    </div>
    <div>
    <ToggleButtonGroup color="primaryvalue="tb1">
      <ToggleButton value="tb1">トグルボタンprimary</ToggleButton>
      <ToggleButton value="tb2">トグルボタン2</ToggleButton>
    </ToggleButtonGroup>
    </div>
    <div>
    <ToggleButtonGroup color="secondaryvalue="tb1">
      <ToggleButton value="tb1">トグルボタンsecondary</ToggleButton>
      <ToggleButton value="tb2">トグルボタン2</ToggleButton>
    </ToggleButtonGroup>
    </div>
    <div>
    <ToggleButtonGroup color="successvalue="tb1">
      <ToggleButton value="tb1">トグルボタンsuccess</ToggleButton>
      <ToggleButton value="tb2">トグルボタン2</ToggleButton>
    </ToggleButtonGroup>
    </div>
    <div>
    <ToggleButtonGroup color="errorvalue="tb1">
      <ToggleButton value="tb1">トグルボタンerror</ToggleButton>
      <ToggleButton value="tb2">トグルボタン2</ToggleButton>
    </ToggleButtonGroup>
    </div>
    <div>
    <ToggleButtonGroup color="infovalue="tb1">
      <ToggleButton value="tb1">トグルボタンinfo</ToggleButton>
      <ToggleButton value="tb2">トグルボタン2</ToggleButton>
    </ToggleButtonGroup>
    </div>
    <div>
    <ToggleButtonGroup color="warningvalue="tb1">
      <ToggleButton value="tb1">トグルボタンwarning</ToggleButton>
      <ToggleButton value="tb2">トグルボタン2</ToggleButton>
    </ToggleButtonGroup>
    </div>
    <div>
    <ThemeProvider theme={tukuttaTheme}>
      <ToggleButtonGroup color="tukuttaIro" value="tb1">
        <ToggleButton value="tb1">トグルボタンtukuttaIro</ToggleButton>
        <ToggleButton value="tb2">トグルボタン2</ToggleButton>
      </ToggleButtonGroup>
    </ThemeProvider>
    </div>
  </div>
, document.getElementById('sample')
);

disabled

ToggleButtonGroupのdisabledの使い方の説明です。
トグルグループの中にあるトグルボタンを全て使用不可にします。
全体が薄い灰色になり使用不可になります。
ブール値を設定します。trueにすると不使用になります。
※注意してください。ブール値を渡さなければいけないためdisabled="true"では正しくありません。これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disabledと書くだけでdisabled={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
サンプルは上段が使用不可になってるので選択されていない部分が薄い灰色になっています。そして選択されている箇所も含めてどちらをクリックしても波模様のアニメーションが出ず反応しません。
const ToggleButton = MaterialUI.ToggleButton;
const ToggleButtonGroup = MaterialUI.ToggleButtonGroup;
ReactDOM.render(
<div>
  <div>
  <ToggleButtonGroup disabled={true} value="tb2">
    <ToggleButton value="tb1">トグルボタンtrue</ToggleButton>,
    <ToggleButton value="tb2">トグルボタン2</ToggleButton>
  </ToggleButtonGroup>
  </div>
  <div>
  <ToggleButtonGroup disabled={false} value="tb2">
    <ToggleButton value="tb1">トグルボタンfalse</ToggleButton>,
    <ToggleButton value="tb2">トグルボタン2</ToggleButton>
  </ToggleButtonGroup>
  </div>
</div>
, document.getElementById('sample')
);

exclusive

ToggleButtonGroupのexclusiveの使い方の説明です。
選択済みにできるトグルボタンを一つだけにするかの設定です。
この設定をしない場合は複数のトグルボタンを選択済みにできます。
ブール値を設定します。trueにすると単一選択になります。
※注意してください。ブール値を渡さなければいけないためexclusive="true"では正しくありません。これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。exclusiveと書くだけでexclusive={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
サンプルの上段はtrueなのでどちらか一方しか選べません。
下段は両方とも選択済みにできます。複数選べる場合は値が配列になるのでサンプルの初期値が配列になっています。
const ToggleButton = MaterialUI.ToggleButton;
const ToggleButtonGroup = MaterialUI.ToggleButtonGroup;
const Main = () => {
  const [sentakuValue, setSentakuValue] = React.useState('tb1');
  const [sentakuValue2, setSentakuValue2] = React.useState(['tb3']);
  const henkou = (oshitaButton, oshitaButtonNoValue) => {
    setSentakuValue(oshitaButtonNoValue);
  };
  const henkou2 = (oshitaButton, oshitaButtonNoValue) => {
    setSentakuValue2(oshitaButtonNoValue);
  };
  return (
    <div>
      <div>
      <ToggleButtonGroup exclusive={true} value={sentakuValue} onChange={henkou}>
        <ToggleButton value="tb1">トグルボタンtrue</ToggleButton>,
        <ToggleButton value="tb2">トグルボタン2</ToggleButton>
      </ToggleButtonGroup>
      </div>
      <div>
      <ToggleButtonGroup exclusive={false} value={sentakuValue2} onChange={henkou2}>
        <ToggleButton value="tb3">トグルボタンfalse</ToggleButton>,
        <ToggleButton value="tb4">トグルボタン2</ToggleButton>
      </ToggleButtonGroup>
      </div>
    </div>
  );
}
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

fullWidth

ToggleButtonGroupのfullWidthの使い方の説明です。
横幅一杯に表示します。
この横幅一杯は親要素の横幅一杯です。
ブール値を設定します。trueにすると横幅一杯になります。
※注意してください。ブール値を渡さなければいけないためfullWidth="true"では正しくありません。これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。fullWidthと書くだけでfullWidth={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
サンプルは親要素がwidth50%なのでtrueにすると画面の半分まで広がります。
const ToggleButton = MaterialUI.ToggleButton;
ReactDOM.render(
<div style={{"width":"50%"}}>
  <div>
  <ToggleButtonGroup fullWidth={true} value="tb1">
    <ToggleButton value="tb1" fullWidth={true}>トグルボタンtrue</ToggleButton>
    <ToggleButton value="tb2" fullWidth={false}>トグルボタン2</ToggleButton>
  </ToggleButtonGroup>
  </div>
  <div>
  <ToggleButtonGroup fullWidth={false} value="tb1">
    <ToggleButton value="tb1" fullWidth={true}>トグルボタンfalse</ToggleButton>
    <ToggleButton value="tb2" fullWidth={false}>トグルボタン2</ToggleButton>
  </ToggleButtonGroup>
  </div>
</div>
, document.getElementById('sample')
);

onChange

ToggleButtonGroupのonChangeの使い方の説明です。
onChangeイベントです。
押したボタンとその値が取得できます。第1引数でそのボタン、第2引数で値です。
第2引数の値はexclusiveの設定によって変わります。
exclusiveがtrueの場合は値が単一になるのでその値か、未選択のnullになります。
exclusiveがfalseで複数選べる場合は選択された値の配列か、未選択の空の配列です。
exclusiveの設定 一つ選択 二つ選択 未選択
true tb1 - null
false ['tb3'] ['tb3','tb4'] []
このサンプルでは第1引数がoshitaButton、第2引数がoshitaButtonNoValueです。
サンプルの上段はどれか一つしか選べないので選んだ場合はその値が、どれも選ばれていない場合はnullが右端に表示されます。
下段は複数選択できるので、選択された値が配列として、一つも選ばれていない場合は空の配列が右端に表示されます。
const ToggleButton = MaterialUI.ToggleButton;
const ToggleButtonGroup = MaterialUI.ToggleButtonGroup;
const Main = () => {
  const [sentakuValue, setSentakuValue] = React.useState('tb1');
  const [sentakuValue2, setSentakuValue2] = React.useState(['tb3']);
  const henkou = (oshitaButton, oshitaButtonNoValue) => {
    setSentakuValue(oshitaButtonNoValue);
  };
  const henkou2 = (oshitaButton, oshitaButtonNoValue) => {
    setSentakuValue2(oshitaButtonNoValue);
  };
  return (
    <div>
      <div>
      <ToggleButtonGroup exclusive={true} value={sentakuValue} onChange={henkou}>
        <ToggleButton value="tb1">トグルボタン単一</ToggleButton>,
        <ToggleButton value="tb2">トグルボタン2</ToggleButton>
      </ToggleButtonGroup>
      <span>値「{JSON.stringify(sentakuValue)}」</span>
      </div>
      <div>
      <ToggleButtonGroup exclusive={false} value={sentakuValue2} onChange={henkou2}>
        <ToggleButton value="tb3">トグルボタン複数</ToggleButton>,
        <ToggleButton value="tb4">トグルボタン2</ToggleButton>
      </ToggleButtonGroup>
      <span>値「{JSON.stringify(sentakuValue2)}」</span>
      </div>
    </div>
  );
}
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

orientation

ToggleButtonGroupのorientationの使い方の説明です。
表示する方向を縦横設定できます。
文字列で設定します。設定できる値は縦の場合はverticalで、横の場合はhorizontalです。
未設定のデフォルトはhorizontalです。
const ToggleButton = MaterialUI.ToggleButton;
const ToggleButtonGroup = MaterialUI.ToggleButtonGroup;
ReactDOM.render(
<div>
  <div>
  <ToggleButtonGroup orientation="verticalvalue="tb2">
    <ToggleButton value="tb1">トグルボタン縦1</ToggleButton>
    <ToggleButton value="tb2">トグルボタン縦2</ToggleButton>
  </ToggleButtonGroup>
  </div>
  <div style={{"margin-top":"1rem"}}>
  <ToggleButtonGroup orientation="horizontalvalue="tb2">
    <ToggleButton value="tb1">トグルボタン横1</ToggleButton>
    <ToggleButton value="tb2">トグルボタン横2</ToggleButton>
  </ToggleButtonGroup>
  </div>
</div>
, document.getElementById('sample')
);

size

ToggleButtonGroupのsizeの使い方の説明です。
ToggleButtonGroupの大きさを設定できます。
文字列で設定します。使用できる値はsmallかmediumかlarge、もしくは文字列を指定できます。
未設定のデフォルトはmediumです。
const Button = MaterialUI.Button;
const ButtonGroup = MaterialUI.ButtonGroup;
ReactDOM.render(
<div>
  <div>
  <ToggleButtonGroup size="smallvalue="tb1">
    <ToggleButton value="tb1">小small1</ToggleButton>
    <ToggleButton value="tb2">小small2</ToggleButton>
  </ToggleButtonGroup>
  </div>
  <div>
  <ToggleButtonGroup size="mediumvalue="tb1">
    <ToggleButton value="tb1">中medium1</ToggleButton>
    <ToggleButton value="tb2">中medium2</ToggleButton>
  </ToggleButtonGroup>
  </div>
  <div>
  <ToggleButtonGroup size="largevalue="tb1">
    <ToggleButton value="tb1">大large1</ToggleButton>
    <ToggleButton value="tb2">大large2</ToggleButton>
  </ToggleButtonGroup>
  </div>
  <div>
  <ToggleButtonGroup value="tb1">
    <ToggleButton value="tb1">未設定デフォルト1</ToggleButton>
    <ToggleButton value="tb2">未設定デフォルト2</ToggleButton>
  </ToggleButtonGroup>
  </div>
</div>
, document.getElementById('sample')
);

sx

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

value

ToggleButtonGroupのvalueの使い方の説明です。
値を設定できます。
値はexclusiveの設定によって変わります。
exclusiveがtrueの場合は値が単一になるのでその値か、未選択のnullになります。
exclusiveがfalseで複数選べる場合は選択された値の配列か、未選択の空の配列です。
exclusiveの設定 一つ選択 二つ選択 未選択
true tb1 - null
false ['tb3'] ['tb3','tb4'] []
サンプルの上段はどれか一つしか選べないので選んだ場合はその値が、どれも選ばれていない場合はnullが右端に表示されます。
下段は複数選択できるので、選択された値が配列として、一つも選ばれていない場合は空の配列が右端に表示されます。
const ToggleButton = MaterialUI.ToggleButton;
const ToggleButtonGroup = MaterialUI.ToggleButtonGroup;
const Main = () => {
  const [sentakuValue, setSentakuValue] = React.useState('tb1');
  const [sentakuValue2, setSentakuValue2] = React.useState(['tb3']);
  const henkou = (oshitaButton, oshitaButtonNoValue) => {
    setSentakuValue(oshitaButtonNoValue);
  };
  const henkou2 = (oshitaButton, oshitaButtonNoValue) => {
    setSentakuValue2(oshitaButtonNoValue);
  };
  return (
    <div>
      <div>
      <ToggleButtonGroup exclusive={true} value={sentakuValue} onChange={henkou}>
        <ToggleButton value="tb1">トグルボタン単一</ToggleButton>,
        <ToggleButton value="tb2">トグルボタン2</ToggleButton>
      </ToggleButtonGroup>
      <span>値「{JSON.stringify(sentakuValue)}」</span>
      </div>
      <div>
      <ToggleButtonGroup exclusive={false} value={sentakuValue2} onChange={henkou2}>
        <ToggleButton value="tb3">トグルボタン複数</ToggleButton>,
        <ToggleButton value="tb4">トグルボタン2</ToggleButton>
      </ToggleButtonGroup>
      <span>値「{JSON.stringify(sentakuValue2)}」</span>
      </div>
    </div>
  );
}
ReactDOM.render(
<Main />
, 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
戻る

全体目次