Radioラジオボタン

ラジオボタンは、ユーザーがオプションのセットから 1 つを選択できるようにし、一度に 1 つのオプションのみが選択されることを保証します。

使用方法

コンポーネントを必要に応じてインポートします：

import 'mdui/components/radio-group.js';
import 'mdui/components/radio.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

import type { RadioGroup } from 'mdui/components/radio-group.js';
import type { Radio } from 'mdui/components/radio.js';

使用例：

Chinese

English

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english">English</mdui-radio>
</mdui-radio-group>

例

選択状態

<mdui-radio-group> コンポーネントの value 属性の値は、現在選択されている <mdui-radio> コンポーネントの value 属性の値です。<mdui-radio-group> コンポーネントの value 属性の値を更新することで、現在選択されているラジオボタンを切り替えることもできます。

Chinese

English

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english">English</mdui-radio>
</mdui-radio-group>

ソース

<mdui-radio> コンポーネントを単独で使用することもできます。この場合、checked 属性を使用して選択状態を読み取りおよび変更できます。

Radio

<mdui-radio checked>Radio</mdui-radio>

ソース

無効状態

<mdui-radio-group> コンポーネントに disabled 属性を追加すると、ラジオボタングループ全体を無効にできます。

Chinese

English

<mdui-radio-group disabled>
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english">English</mdui-radio>
</mdui-radio-group>

ソース

特定のラジオボタンを無効にする必要がある場合は、<mdui-radio> コンポーネントに disabled 属性を追加します。

Chinese

English

<mdui-radio-group>
  <mdui-radio value="chinese">Chinese</mdui-radio>
  <mdui-radio value="english" disabled>English</mdui-radio>
</mdui-radio-group>

ソース

アイコン

unchecked-icon と checked-icon 属性を設定することで、それぞれ未選択状態と選択状態のラジオボタンの Material Icons アイコンを定義できます。unchecked-icon と checked-icon スロットを使用して設定することもできます。

Chinese

English

<mdui-radio-group value="chinese">
  <mdui-radio
    unchecked-icon="check_box_outline_blank"
    checked-icon="lock"
    value="chinese"
  >Chinese</mdui-radio>
  <mdui-radio value="english">
    <mdui-icon slot="unchecked-icon" name="check_box_outline_blank"></mdui-icon>
    <mdui-icon slot="checked-icon" name="lock"></mdui-icon>
    English
  </mdui-radio>
</mdui-radio-group>

ソース

`mdui-radio-group` API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`disabled`	`disabled`	`boolean`	`false`
このコンポーネントを無効にするかどうかを指定します。
`form`	`form`	`string`	-
関連付ける `<form>` 要素です。この属性値には、同一ページ内の `<form>` 要素の `id` を指定する必要があります。この属性が指定されていない場合、この要素は `<form>` 要素の子要素である必要があります。この属性を使用すると、要素を `<form>` 要素の子要素だけでなく、ページ上の任意の場所に配置できます。
`name`	`name`	`string`	`''`
ラジオボタングループの名前です。フォームデータと共に送信されます。
`value`	`value`	`string`	`''`
ラジオボタングループで現在選択されている値です。フォームデータと共に送信されます。
	`defaultValue`	`string`	`''`
デフォルトで選択される値です。フォームをリセットすると、このデフォルト値にリセットされます。この属性はJavaScriptプロパティでのみ設定できます。
`required`	`required`	`boolean`	`false`
フォーム送信時に、いずれかのラジオボタンを選択する必要があるかどうかを指定します。
	`validity`	`ValidityState`	-
フォーム検証ステータスを表す `ValidityState` オブジェクトです。詳細は `ValidityState` を参照してください。
	`validationMessage`	`string`	-
フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。

メソッド

名前	パラメーター	戻り値
`checkValidity`		`boolean`
フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は `false` を返し、`invalid` イベントをトリガーします。合格した場合は `true` を返します。
`reportValidity`		`boolean`
フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は `false` を返し、`invalid` イベントをトリガーします。合格した場合は `true` を返します。検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
`setCustomValidity`	`message: string`	`void`
カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。

イベント

名前
`change`
選択された値が変化したときに発生します。
`input`
選択された値が変化したときに発生します。
`invalid`
フォームフィールドの検証に合格しなかったときに発生します。

Slots

名前
デフォルト
`<mdui-radio>` 要素

`mdui-radio` API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`value`	`value`	`string`	`''`
現在のラジオオプションの値です。
`disabled`	`disabled`	`boolean`	`false`
現在のラジオオプションを無効にするかどうかを指定します。
`checked`	`checked`	`boolean`	`false`
現在のラジオオプションが選択されているかどうかを指定します。
`unchecked-icon`	`uncheckedIcon`	`string`	-
非選択状態のMaterial Iconsアイコン名です。`slot="unchecked-icon"` で設定することもできます。
`checked-icon`	`checkedIcon`	`string`	-
選択状態のMaterial Iconsアイコン名です。`slot="checked-icon"` で設定することもできます。
`autofocus`	`autofocus`	`boolean`	`false`
ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
`tabindex`	`tabIndex`	`number`	-
Tab キーによるフォーカス移動時の、要素の順序を指定します。

メソッド

名前	パラメーター	戻り値
`click`		`void`
要素のマウスクリックをシミュレートします。
`focus`	`options: FocusOptions` (オプション)	`void`
現在の要素にフォーカスを設定します。オプションとして、以下のプロパティを持つオブジェクトを渡すことができます： `preventScroll`：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを `true` に設定します。
`blur`		`void`
現在の要素からフォーカスを外します。

イベント

名前
`focus`
フォーカスを取得したときに発生します。
`blur`
フォーカスを失ったときに発生します。
`change`
このラジオオプションが選択されたときに発生します。

Slots

名前
デフォルト
テキストコンテンツ
`unchecked-icon`
非選択状態のアイコン
`checked-icon`
選択状態のアイコン

CSS Parts

名前
`control`
左側のアイコンコンテナ
`unchecked-icon`
非選択状態のアイコン
`checked-icon`
選択状態のアイコン
`label`
テキストコンテンツ

前の章

NavigationRail ナビゲーションレール

次の章

RangeSlider レンジスライダー