nve-checkbox
En avkrysningsboks.
Ikke bruk `size`, i NVE bruker vi kun en størrelse på avkrysningsbokser.
Arvet fra SlCheckbox.
Feil / oppgaver / PR
Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-checkbox.
html
<nve-checkbox>Ja, jeg vil!</nve-checkbox>Eksempler
Ledetekst
Teksten på høyre side kan legges inni nve-checkbox.
html
<nve-checkbox>Ledetekst</nve-checkbox>Checked
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>Disabled
Bruk disabled for å deaktivere boksen.
html
<nve-checkbox disabled>Disabled</nve-checkbox> <nve-checkbox>Enabled</nve-checkbox>Spor
| Navn | Beskrivelse |
|---|---|
| (standard) | The checkbox's label. |
| help-text | Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute. |
Hendelser
| 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. |
Egenskaper
| Navn | Type | Arvet fra | Beskrivelse | Reflected |
|---|---|---|---|---|
| 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. | |
| helpText | string = '' | SlCheckbox | The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. | |
| validity | SlCheckbox | Gets the validity state object | ||
| validationMessage | SlCheckbox | Gets the validation message |
Metoder
| 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. |
Deler
| 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. |
| form-control-help-text | The help text's wrapper. |