Checkbox

shadow

A checkbox, or also a check box, is an element that allows users to select one or more options from a set. Click on the checkbox to change its status to true or false.

Basic usage

The sample shows the checkbox in its default state with the normal label. This is a good starting point for simple form options.

Placement End

The preview moves the content behind the checkbox to the opposite side, which is useful where you need a more compact or dense form layout.

Color

The demo compares the color variations of the checkbox to show how the visual changes for different meaning states.

Indeterminate checkbox

When the indeterminate attribute is added, a checkbox is displayed whose default state is neutral, i.e. neither true nor false.

Variant

Adding the variant attribute with the value circle will display a checkbox in a round shape.

CSS custom variables

When you need to adjust the outline or spacing of a checkbox without affecting the markup, use its CSS variables.

When to use

Use wje-checkbox when the user enters a value, selects options, or performs an action on a form.

When not to use

Don't just use it as a visual decorative element without interaction. In this case, give priority to the presentation components.

Accessibility

Always link the component to the description (label/aria-label), keep keyboard control, and display a clear message on validation errors.

Recommended practices

• Keep validation rules and error states consistent across the entire form.
• For asynchronous operations, display the load status or disabled status.
• For complex forms, prefer smaller sections and immediate feedback.

Attributes and properties

checked

Popis	Určuje, či je voľba checked zapnutá a ovplyvňuje správanie komponentu.
Atribút	checked
Typ	boolean
Predvolené	false

customErrorDisplay

Popis	Riadi validáciu alebo stavové hlášky pre voľbu custom-error-display.
Atribút	custom-error-display
Typ	boolean
Predvolené	false

disabled

Popis	Vypína používateľskú interakciu s komponentom.
Atribút	disabled
Typ	boolean
Predvolené	-

indeterminate

Popis	Určuje, či je voľba indeterminate zapnutá a ovplyvňuje správanie komponentu.
Atribút	indeterminate
Typ	boolean
Predvolené	false

invalid

Popis	Riadi validáciu alebo stavové hlášky pre voľbu invalid.
Atribút	invalid
Typ	boolean
Predvolené	false

label

Popis	Nastavuje zobrazený alebo prístupný textový štítok.
Atribút	label
Typ	string
Predvolené	-

required

Popis	Označí komponent ako povinný pre validáciu formulára.
Atribút	required
Typ	boolean
Predvolené	-

validateOnChange

Popis	Určuje, či je voľba validate-on-change zapnutá a ovplyvňuje správanie komponentu.
Atribút	validate-on-change
Typ	boolean
Predvolené	false

value

Popis	Nastavuje aktuálnu hodnotu komponentu.
Atribút	value
Typ	string
Predvolené	on

Events

Názov	Popis
wje-toggle:input	Vyvolá sa pri zmene vstupnej hodnoty.
wje-toggle:change	Vyvolá sa pri zmene hodnoty komponentu.

Methods

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS shadow parts

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.

CSS custom variables

Názov	Popis
--wje-checkbox-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-checkbox-border-width	Vlastná CSS premenná, ktorá riadi border width.
--wje-checkbox-border-style	Vlastná CSS premenná na štýlovanie komponentu (border style).
--wje-checkbox-border-color	Vlastná CSS premenná, ktorá riadi border color.
--wje-checkbox-margin-inline	Vlastná CSS premenná, ktorá riadi margin inline.

Slots

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.