Checkboxチェックボックス

チェックボックスは、ユーザーがオプションのセットから 1 つまたは複数のオプションを選択したり、単一オプションのオン/オフ状態を切り替えたりできるようにします。

使用方法

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

import 'mdui/components/checkbox.js';

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

import type { Checkbox } from 'mdui/components/checkbox.js';

使用例：

Checkbox

<mdui-checkbox>Checkbox</mdui-checkbox>

例

選択状態

チェックボックスが選択されると、checked 属性の値は true になります。checked 属性を追加すると、チェックボックスをデフォルトで選択状態にできます。

Checkbox

<mdui-checkbox checked>Checkbox</mdui-checkbox>

ソース

無効状態

disabled 属性を追加するとチェックボックスを無効にできます。

Checkbox

<mdui-checkbox disabled>Checkbox</mdui-checkbox>
<mdui-checkbox disabled checked>Checkbox</mdui-checkbox>

ソース

不確定状態

indeterminate 属性を追加すると、チェックボックスが不確定状態であることを示します。

Checkbox

<mdui-checkbox indeterminate>Checkbox</mdui-checkbox>

ソース

アイコン

unchecked-icon、checked-icon、indeterminate-icon 属性を設定することで、それぞれ未選択、選択、不確定状態のチェックボックスの Material Icons アイコンを設定できます。unchecked-icon、checked-icon、indeterminate-icon スロットを使用して設定することもできます。

Checkbox

<mdui-checkbox
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Checkbox</mdui-checkbox>

<mdui-checkbox
  indeterminate
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Checkbox</mdui-checkbox>

<br/>

<mdui-checkbox>
  <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
  <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
  <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
  Checkbox
</mdui-checkbox>

<mdui-checkbox indeterminate>
  <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
  <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
  <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
  Checkbox
</mdui-checkbox>

ソース

API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`disabled`	`disabled`	`boolean`	`false`
無効状態にするかどうかを指定します。
`checked`	`checked`	`boolean`	`false`
選択状態にするかどうかを指定します。
	`defaultChecked`	`boolean`	`false`
デフォルトの選択状態です。フォームをリセットすると、この状態に戻ります。この属性はJavaScriptプロパティでのみ設定できます。
`indeterminate`	`indeterminate`	`boolean`	`false`
不確定状態にするかどうかを指定します。
`required`	`required`	`boolean`	`false`
フォーム送信時に、このチェックボックスを必須にするかどうかを指定します。
`form`	`form`	`string`	-
関連付ける `<form>` 要素です。この属性値には、同一ページ内の `<form>` 要素の `id` を指定する必要があります。この属性が指定されていない場合、この要素は `<form>` 要素の子要素である必要があります。この属性を使用すると、要素を `<form>` 要素の子要素だけでなく、ページ上の任意の場所に配置できます。
`name`	`name`	`string`	`''`
チェックボックスの名前です。フォームデータと共に送信されます。
`value`	`value`	`string`	`'on'`
チェックボックスの値です。フォームデータと共に送信されます。
`unchecked-icon`	`uncheckedIcon`	`string`	-
非選択状態のMaterial Iconsアイコン名です。`slot="unchecked-icon"` で設定することもできます。
`checked-icon`	`checkedIcon`	`string`	-
選択状態のMaterial Iconsアイコン名です。`slot="checked-icon"` で設定することもできます。
`indeterminate-icon`	`indeterminateIcon`	`string`	-
不確定状態のMaterial Iconsアイコン名です。`slot="indeterminate-icon"` で設定することもできます。
	`validity`	`ValidityState`	-
フォーム検証ステータスを表す `ValidityState` オブジェクトです。詳細は `ValidityState` を参照してください。
	`validationMessage`	`string`	-
フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
`autofocus`	`autofocus`	`boolean`	`false`
ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
`tabindex`	`tabIndex`	`number`	-
Tab キーによるフォーカス移動時の、要素の順序を指定します。

メソッド

名前	パラメーター	戻り値
`checkValidity`		`boolean`
フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は `false` を返し、`invalid` イベントをトリガーします。合格した場合は `true` を返します。
`reportValidity`		`boolean`
フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は `false` を返し、`invalid` イベントをトリガーします。合格した場合は `true` を返します。検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
`setCustomValidity`	`message: string`	`void`
カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
`click`		`void`
要素のマウスクリックをシミュレートします。
`focus`	`options: FocusOptions` (オプション)	`void`
現在の要素にフォーカスを設定します。オプションとして、以下のプロパティを持つオブジェクトを渡すことができます： `preventScroll`：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを `true` に設定します。
`blur`		`void`
現在の要素からフォーカスを外します。

イベント

名前
`focus`
フォーカスを取得したときに発生します。
`blur`
フォーカスを失ったときに発生します。
`change`
選択状態が変更されたときに発生します。
`input`
選択状態が変更されたときに発生します。
`invalid`
フォームフィールドの検証に合格しなかったときに発生します。

Slots

名前
デフォルト
チェックボックスのテキスト
`unchecked-icon`
非選択状態のアイコン
`checked-icon`
選択状態のアイコン
`indeterminate-icon`
不確定状態のアイコン

CSS Parts

名前
`control`
左側のアイコンコンテナ
`unchecked-icon`
非選択状態のアイコン
`checked-icon`
選択状態のアイコン
`indeterminate-icon`
不確定状態のアイコン
`label`
チェックボックスのテキスト

前の章

Card カード

次の章

Chip チップ