CheckboxZaškrtávací políčko

Zaškrtávací políčka umožňují uživatelům vybrat jednu nebo více možností ze sady, nebo přepnout stav zapnuto/vypnuto jedné možnosti.

Způsob použití

Importujte komponentu podle potřeby:

import 'mdui/components/checkbox.js';

Importujte TypeScript typy komponenty podle potřeby:

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

Příklad použití:

Zaškrtávací políčko

<mdui-checkbox>Zaškrtávací políčko</mdui-checkbox>

Nastavením atributů unchecked-icon, checked-icon a indeterminate-icon můžete nastavit ikony Material Icons pro nevybraný, vybraný a neurčitý stav zaškrtávacího políčka. Můžete je také nastavit pomocí slotů unchecked-icon, checked-icon a indeterminate-icon.

Zaškrtávací políčko

<mdui-checkbox
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Zaškrtávací políčko</mdui-checkbox>

<mdui-checkbox
  indeterminate
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Zaškrtávací políčko</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>
  Zaškrtávací políčko
</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>
  Zaškrtávací políčko
</mdui-checkbox>

Zdrojový kód

API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`disabled`	`disabled`	`boolean`	`false`
Určuje, zda je prvek zakázaný.
`checked`	`checked`	`boolean`	`false`
Určuje, zda je prvek zaškrtnutý.
	`defaultChecked`	`boolean`	`false`
Výchozí zaškrtnutý stav. Při resetování formuláře se stav obnoví na tuto hodnotu. Tuto vlastnost lze nastavit pouze pomocí JavaScriptu.
`indeterminate`	`indeterminate`	`boolean`	`false`
Určuje, zda je prvek v neurčitém stavu.
`required`	`required`	`boolean`	`false`
Určuje, zda toto zaškrtávací políčko musí být při odesílání formuláře zaškrtnuto.
`form`	`form`	`string`	-
Přidružený formulář `<form>`. Hodnotou by mělo být `id` prvku `<form>` na stejné stránce. Pokud není atribut zadán, musí být tento prvek potomkem `<form>`. Díky tomuto atributu jej však lze umístit kamkoli na stránku, nejen jako potomka `<form>`.
`name`	`name`	`string`	`''`
Název zaškrtávacího políčka, který se odešle spolu s daty formuláře.
`value`	`value`	`string`	`'on'`
Hodnota zaškrtávacího políčka, která se odešle spolu s daty formuláře.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Název ikony z knihovny Material Icons pro nezaškrtnutý stav. Lze také nastavit pomocí `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Název ikony z knihovny Material Icons pro zaškrtnutý stav. Lze také nastavit pomocí `slot="checked-icon"`.
`indeterminate-icon`	`indeterminateIcon`	`string`	-
Název ikony z knihovny Material Icons pro neurčitý stav. Lze také nastavit pomocí `slot="indeterminate-icon"`.
	`validity`	`ValidityState`	-
Objekt s informacemi o stavu validace formuláře; podrobnosti viz `ValidityState`.
	`validationMessage`	`string`	-
Pokud pole formuláře neprojde validací, tato vlastnost obsahuje chybovou zprávu. Při úspěšné validaci je výsledkem prázdný řetězec.
`autofocus`	`autofocus`	`boolean`	`false`
Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
`tabindex`	`tabIndex`	`number`	-
Pořadí prvku při přepínání fokusu pomocí klávesy Tab.

Metody

Název	Parametry	Vrací
`checkValidity`		`boolean`
Zkontroluje, zda pole formuláře prošlo validací. Pokud ne, vrátí `false` a spustí událost `invalid`; pokud ano, vrátí `true`.
`reportValidity`		`boolean`
Zkontroluje, zda pole formuláře prošlo validací. Pokud ne, vrátí `false` a spustí událost `invalid`; pokud ano, vrátí `true`. Při neúspěšné validaci se zobrazí chybová zpráva.
`setCustomValidity`	`message: string`	`void`
Nastaví vlastní chybový text. Dokud tento text není prázdný, znamená to, že pole neprošlo validací.
`click`		`void`
Simuluje kliknutí myší na prvek.
`focus`	`options: FocusOptions` (Volitelné)	`void`
Nastaví fokus na aktuální prvek. Lze předat objekt jako parametr s vlastnostmi: `preventScroll`: Ve výchozím nastavení se po získání fokusu stránka posune tak, aby byl prvek viditelný. Pokud nechcete, aby se stránka posouvala, nastavte tuto vlastnost na `true`.
`blur`		`void`
Odebere fokus z aktuálního prvku.

Události

Název
`focus`
Spustí se při získání fokusu.
`blur`
Spustí se při ztrátě fokusu.
`change`
Spustí se při změně stavu výběru.
`input`
Spustí se při změně stavu výběru.
`invalid`
Spustí se, pokud pole formuláře neprojde validací.

Slots

Název
(výchozí)
Text zaškrtávacího políčka.
`unchecked-icon`
Ikona pro nezaškrtnutý stav.
`checked-icon`
Ikona pro zaškrtnutý stav.
`indeterminate-icon`
Ikona pro neurčitý stav.

CSS Parts

Název
`control`
Kontejner pro levou ikonu.
`unchecked-icon`
Ikona pro nezaškrtnutý stav.
`checked-icon`
Ikona pro zaškrtnutý stav.
`indeterminate-icon`
Ikona pro neurčitý stav.
`label`
Text zaškrtávacího políčka.

Předchozí kapitola

Card Karta

Další kapitola

Chip Chip

CheckboxZaškrtávací políčko

Způsob použití

Příklady

Vybraný stav

Zakázaný stav

Neurčitý stav

Ikona

API

Vlastnosti

Metody

Události

Slots

CSS Parts