ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

FormControlLabelの各プロパティの解説

MUIでのFormControlLabelの扱い方の説明です。
ラジオボタンスイッチチェックボックスにラベルをつけたい場合に使います。
HTMLのLABEL要素と似た働きをします。
そのため記述した内容をクリックしてもチェックがはいります。
const FormControlLabel = MaterialUI.FormControlLabel;
const Radio = MaterialUI.Radio;
ReactDOM.render(
<FormControlLabel control={<Radio />} label="ラジオ1(ここをクリックしてもチェックが入る)" />
, document.getElementById('sample')
);

control*

FormControlLabelのcontrolの使い方の説明です。
必須です。無いと怒られます。
react-dom.production.min.js:141 TypeError: Cannot read properties of undefined (reading 'props')
  at FormControlLabel (material-ui.development.js:29388:59)
controlを設定し忘れているとこんな感じのエラーが出るはずです。
ラベルを表示したいコンポーネントを設定します。
設定できるのはRadio、Switch、Checkboxだけです。
const FormControlLabel = MaterialUI.FormControlLabel;
const Radio = MaterialUI.Radio;
const Switch = MaterialUI.Switch;
const Checkbox = MaterialUI.Checkbox;
ReactDOM.render(
<div>
  <FormControlLabel control={<Radio />} label="ラジオ" />
  <FormControlLabel control={<Switch />} label="スイッチ" />
  <FormControlLabel control={<Checkbox />} label="チェックボックス" />
</div>
, document.getElementById('sample')
);

checked

FormControlLabelのcheckedの使い方の説明です。
表示した際に選択済みにするかの設定です。
ブール値でtrueの場合に選択済みになります。
const FormControlLabel = MaterialUI.FormControlLabel;
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
  <FormControlLabel checked={true} control={<Radio />} label="ラジオ1" />
  <FormControlLabel checked={false} control={<Radio />} label="ラジオ2" />
</div>
, document.getElementById('sample')
);

classes

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

componentsProps

FormControlLabelのcomponentsPropsの使い方の説明です。
ラベルの表示を変えたい場合に使用します。
typographyとして渡さないといけないのがちょっと面倒です。
const FormControlLabel = MaterialUI.FormControlLabel;
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
  <FormControlLabel componentsProps={{"typography":{"color":"red"}}} control={<Radio />} label="赤いラジオボタン" />
</div>
, document.getElementById('sample')
);

disabled

FormControlLabelのdisabledの使い方の説明です。
不使用にするにはdisabledをtrueに設定します。
desabledにすると全体が薄い灰色になりクリックしたときのアニメーションがなくなります。
const FormControlLabel = MaterialUI.FormControlLabel;
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
  <FormControlLabel disabled={true} control={<Radio />} label="使えないラジオボタン" />
  <FormControlLabel disabled={false} control={<Radio />} label="使えるラジオボタン" />
</div>
, document.getElementById('sample')
);

disableTypography

FormControlLabelのdisableTypographyの使い方の説明です。
ラベルを表示する際にタイポグラフィでいい感じに表示させます。
ブール値をtrueにするとタイポグラフィを通さない素の状態のテキストを表示します。
素の状態がどうなるかはブラウザーや独自に定義したCSSに依存します。
const FormControlLabel = MaterialUI.FormControlLabel;
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
  <FormControlLabel disableTypography={true} control={<Radio />} label="すっぴんのラジオボタン" />
  <FormControlLabel disableTypography={false} control={<Radio />} label="タイポで整えたラジオボタン" />
</div>
, document.getElementById('sample')
);

inputRef

FormControlLabelのinputRefの使い方の説明です。
inputRefは最終的に生成されるHTMLのINPUT要素のrefを設定できます。

label

FormControlLabelのlabelの使い方の説明です。
表示したいラベルを設定できます。
ノードを設定できるのでテキストでなくてもかまいません。
気を付けてくださいFormControlLabelではラベルはSPANで囲まれてしまいます。
そのためSPAN要素の子要素に可能なフレージングコンテンツしか使えません。DIV要素を使用してはいけません。
サンプルの2つ目はテキストを赤色にした文字を設定したノードを表示しています。
単純にラベルの色を変えるなどをしたいだけならばcomponentsPropsの使用を検討しても良いかもしれません。
const FormControlLabel = MaterialUI.FormControlLabel;
const Radio = MaterialUI.Radio;
const TukuttaSPAN = <span style={{"color":"red"}}>作ったラジオボタンのラベル</span>;
ReactDOM.render(
<div>
  <FormControlLabel control={<Radio />} label="ラジオボタン1" />
  <FormControlLabel control={<Radio />} label={TukuttaSPAN} />
</div>
, document.getElementById('sample')
);

labelPlacement

FormControlLabelのlabelPlacementの使い方の説明です。
ラベルを上下左右どこに表示するかを設定できます。
top、bottom、start、endの4つを設定できます。
topは上、bottomは下、startは左、endは右にラベルが表示されます。
未設定のデフォルトはendになり、右側にラベルが表示されます。
const FormControlLabel = MaterialUI.FormControlLabel;
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
  <FormControlLabel labelPlacement="top" control={<Radio />} label="ラジオ上" />
  <FormControlLabel labelPlacement="bottom" control={<Radio />} label="ラジオ下" />
  <FormControlLabel labelPlacement="start" control={<Radio />} label="ラジオ左" />
  <FormControlLabel labelPlacement="end" control={<Radio />} label="ラジオ右" />
</div>
, document.getElementById('sample')
);

onChange

FormControlLabelのonChangeの使い方の説明です。
INPUT要素のonChangeと同じです。
event.target.valueで値を取得できます。
サンプルではクリックするとアラートウインドを出し値を表示します
const FormControlLabel = MaterialUI.FormControlLabel;
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
<FormControlLabel onChange={(event)=>{alert('クリックされました。値は'+event.target.value)}} control={<Radio />} label="ラジオボタン1" value="ラジオボタン1です" />
<FormControlLabel onChange={(event)=>{alert('クリックされました。値は'+event.target.value)}} control={<Radio />} label="ラジオボタン2" value="ラジオボタン2です" />
</div>
, document.getElementById('sample')
);

sx

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

value

FormControlLabelのvalueの使い方の説明です。
最終的に生成されるINPUT要素のvalueを設定できます。
const FormControlLabel = MaterialUI.FormControlLabel;
const Radio = MaterialUI.Radio;
ReactDOM.render(
<FormControlLabel value="ラジオ1" control={<Radio />} label="ラジオボタン1" />
, 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
戻る

全体目次