nve-checkbox

En avkrysningsboks. Ikke bruk `size`, i NVE bruker vi kun en størrelse på avkrysningsbokser.

html

<nve-checkbox>Ja, jeg vil!</nve-checkbox>

Eksempler

Teksten på høyre side kan legges inni nve-checkbox.

html

<nve-checkbox>Ledetekst</nve-checkbox>

checked er satt hvis boksen er krysset av og motsatt. Bruk indeterminate for å vise at man ikke har tatt stilling ennå.

html

<nve-checkbox checked>checked</nve-checkbox>
<nve-checkbox>unchecked</nve-checkbox>
<nve-checkbox indeterminate>indeterminate</nve-checkbox>

Bruk disabled for å deaktivere boksen.

html

<nve-checkbox disabled>Disabled</nve-checkbox> <nve-checkbox>Enabled</nve-checkbox>

Navn	Beskrivelse
(standard)	The checkbox's label.

Navn	Arvet fra	Beskrivelse
sl-blur	SlCheckbox	Emitted when the checkbox loses focus.
sl-change	SlCheckbox	Emitted when the checked state changes.
sl-focus	SlCheckbox	Emitted when the checkbox gains focus.
sl-input	SlCheckbox	Emitted when the checkbox receives input.
sl-invalid	SlCheckbox	Emitted when the form control has been checked for validity and its constraints aren't satisfied.

Navn	Attributt-synk	Type	Standardverdi	Arvet fra	Beskrivelse
input		HTMLInputElement		SlCheckbox
title		string	''	SlCheckbox
name		string	''	SlCheckbox	The name of the checkbox, submitted as a name/value pair with form data.
value		string		SlCheckbox	The current value of the checkbox, submitted as a name/value pair with form data.
size		'small' \| 'medium' \| 'large'	'medium'	SlCheckbox	The checkbox's size.
disabled		boolean	false	SlCheckbox	Disables the checkbox.
checked		boolean	false	SlCheckbox	Draws the checkbox in a checked state.
indeterminate		boolean	false	SlCheckbox	Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
defaultChecked		boolean	false	SlCheckbox	The default value of the form control. Primarily used for resetting the form control.
form		string	''	SlCheckbox	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.
required		boolean	false	SlCheckbox	Makes the checkbox a required field.
validity				SlCheckbox	Gets the validity state object
validationMessage				SlCheckbox	Gets the validation message

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
handleDisabledChange			SlCheckbox
handleStateChange			SlCheckbox
click			SlCheckbox	Simulates a click on the checkbox.
focus	options: FocusOptions		SlCheckbox	Sets focus on the checkbox.
blur			SlCheckbox	Removes focus from the checkbox.
checkValidity			SlCheckbox	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
getForm		HTMLFormElement \| null	SlCheckbox	Gets the associated form, if one exists.
reportValidity			SlCheckbox	Checks for validity and shows the browser's validation message if the control is invalid.
setCustomValidity	message: string		SlCheckbox	Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear the custom validation message, call this method with an empty string.

Navn	Beskrivelse
base	The component's base wrapper.
control	The square container that wraps the checkbox's checked state.
control--checked	Matches the control part when the checkbox is checked.
control--indeterminate	Matches the control part when the checkbox is indeterminate.
checked-icon	The checked icon, an `<sl-icon>` element.
indeterminate-icon	The indeterminate icon, an `<sl-icon>` element.
label	The container that wraps the checkbox's label.