【Material Design】Radio Buttonsの使い方

【Material Design】Radio Buttonsの使い方

今回はMaterial Design の Radio Buttonsの使いかたを紹介します。

Checkboxの同様にフォームで使用する場合や、表示内容を絞る際など使用しやすいパーツです。

今回作成するのは以下のようなラジオボタンです。

ブラウザのデフォルトより視覚性に優れてます。

See the Pen mdc radio by s-Kuma (@kumatechlab) on CodePen.

RadioButtonsの使用方法

上記のラジオボタンの作成方法を紹介します。

CSS

@use "@material/radio/styles";
@use "@material/form-field";

@include form-field.core-styles;

radioスタイルの読み込みとformfieldの取り込みで表示を整えます。

JS

import {MDCFormField} from '@material/form-field';
import {MDCRadio} from '@material/radio';

const radio = new MDCRadio(document.querySelector('.mdc-radio'));
const formField = new MDCFormField(document.querySelector('.mdc-form-field'));
formField.input = radio;

radio、form-fieldのどちらもインスタンスの作成が必要です。

HTML

  <div class="mdc-form-field">
		  <div class="mdc-radio">
		    <input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
		    <div class="mdc-radio__background">
		      <div class="mdc-radio__outer-circle"></div>
		      <div class="mdc-radio__inner-circle"></div>
		    </div>
		    <div class="mdc-radio__ripple"></div>
		  </div>
		  <label for="radio-1">ラジオボタン1</label>
		</div>

label、inputで使用する場合に付属がいろいろとついた形をしています。

使いかたの基本は変わらず、nameを同一にすれば択一式になります。

また、デフォルトの色については以下のように設定されています。

  • チェック前枠色・・・rgba(on-surface, 0.54)
  • チェック後ボタンの色・・・secondary

mixinの利用

色の変更やリップルサイズの変更ができます。

mixinを利用するために読み込むCSSを少し変更します。

「@use “@material/radio”;」を追加します。

@use "@material/radio/styles";
@use "@material/radio";
@use "@material/form-field";

枠色の変更

material-design-dadio - 20201115093930
material-design-dadio - 20201115093935
.my-radio {
	@include radio.unchecked-stroke-color(theme.$primary); //チェックなし時
	@include radio.checked-stroke-color(theme.$primary); //チェック時
}

チェックされている時、チェックされていない時の枠の色を変えることができます。

今回はテーマのprimaryカラーで作成しています。

枠内の色変更

material-design-dadio - 20201115094026
.my-radio {
	@include radio.ink-color(theme.$primary);
}

checkされた際の枠内の色を変更できます。

disable時の枠色変更

material-design-dadio - 20201115095001
material-design-dadio - 20201115095014
.my-radio2 {
	@include radio.disabled-unchecked-stroke-color(rgba(theme.$primary, .38)); //非チェック状態
	@include radio.disabled-checked-stroke-color(rgba(theme.$primary, .38)); //チェック状態
}
  <div class="mdc-form-field">
		  <div class="mdc-radio mdc-radio--disabled my-radio2">
		    <input class="mdc-radio__native-control" type="radio" id="radio-2" name="radio" disabled>
		    <div class="mdc-radio__background">
		      <div class="mdc-radio__outer-circle"></div>
		      <div class="mdc-radio__inner-circle"></div>
		    </div>
		    <div class="mdc-radio__ripple"></div>
		  </div>
		  <label for="radio-1">ラジオボタン2</label>
		</div>

disable時の枠色を変更できます。

disable時の枠内の色変更

material-design-dadio - 20201115095429
.my-radio2 {
	@include radio.disabled-ink-color(rgba(theme.$primary, .38));
}

disable時かつチェック時の枠内の色を変更できます。

選択可能幅調整

material-design-dadio - 20201115101950
.my-radio {
	@include radio.touch-target(200px, 100px);
}

タッチ可能な幅を調整できます。

どのように計算されているかは直接mixinを見てみてください。

リップルサイズの変更

material-design-dadio - 20201115102610
.my-radio {
	@include radio.ripple-size(100px);
}

リップルサイズを変更することが可能です。

密度変更

material-design-dadio - 20201115102834
.my-radio {
	@include radio.density(-3);
}

タッチ可能サイズやリップルサイズなどを含めた設定です。

全体の大きさを(-3,-2,-1,0)から変更できます。

まとめ

ブラウザデフォルトよりUI/UXの面で優れたものが使用できます。

検索項目で使用する場合や、表示内容切り替えにはぜひ使用していきたい項目です。

また、使用方法デザイン詳細を参考にして利用してみてください。