Statut
Component checklist
Usage
Exemples d'intégration de l'accordéon sur différents framework:
<dsa-checkbox>J'accepte d'être contacté par email.</dsa-checkbox>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/checkbox/checkbox.js'
import type { DSACheckbox } from '@ds-autonomie/web-components'
</script>
Code HTML à implémenter pour utiliser le composant case à cocher
import type { DSACheckbox } from '@ds-autonomie/web-components'
import '@ds-autonomie/web-components/dist/components/checkbox/checkbox.js'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-checkbox>J'accepte d'être contacté par email.</dsa-checkbox>
app.component.html
API
Attributs et propriétés
|
attribut
|
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
accessibleName accessible-name |
Fournit un nom accessible dans le cas où aucun label n'est fourni. |
string |
- |
|
checked |
Affiche la checkbox comme sélectionnée. Lorsqu'une checkbox est rendue dans un checkbox-group, ce dernier prend le contrôle de son état checked au travers de son propre attribut value. |
boolean |
false |
|
defaultChecked |
La valeur par défaut de la checkbox. Utile lors de la réinitialisation |
boolean |
false |
|
disabled |
Désactive le champ |
boolean |
false |
|
readonly |
Rend le champ en lecture seule |
boolean |
false |
|
error |
Indique si le composant doit être en état d'erreur |
boolean |
false |
|
errorMessage error-message |
Un message d'erreur qui est affiché lorsque l'attribut error est définie à true. Si plusieurs messages doivent être affichés, les ajouter dans la chaine de caractères séparés par des pipes "|". |
string | string[] |
'' |
|
form |
Par défaut, les contrôles de formulaire sont associés à l'élément de formulaire parent le plus proche. Cet attribut permet de placer le contrôle de formulaire en dehors d'un formulaire et de l'associer au formulaire qui a cet identifiant. Le formulaire doit être dans le même document ou racine fantôme pour que cela fonctionne |
string |
'' |
|
indeterminate |
Affiche la checkbox dans un état indéterminé. Cela s'applique sur une checkbox "tout/rien" qui contrôle ensemble de checkbox comprenant un mélange d'états sélectionnés et non sélectionnés |
boolean |
false |
|
name |
Le nom du champ, soumis sous la forme d'une paire nom/valeur avec les données du formulaire |
string |
'' |
|
required |
Rend le champ obligatoire |
boolean |
false |
|
size |
La taille du champ |
small medium large |
medium |
|
value |
La valeur du contrôle, soumis sous la forme d'une paire nom/valeur avec les données du formulaire |
string |
'' |
Méthodes
|
Nom |
Description |
Type |
|
blur()
|
Enlève le focus du champ |
() => void |
|
click() |
Simule un click sur la checkbox |
() => void |
|
checkValidity() |
Vérifie la validité du champ mais ne montre pas de message de validation |
() => boolean |
|
focus() |
Met le focus sur le champ |
(options?: FocusOptions) => void |
|
getForm() |
Obtient le formulaire associé si il existe |
() => HTMLFormElement | null |
|
reportValidity() |
Vérifie la validité et montre le message du navigateur si le champ est invalide |
() => boolean |
|
setCustomValidity() |
Défini un message de validation personnalisé |
(message: string) => void |
Événements
|
Nom |
Description |
|---|---|
|
dsa-blur |
Émis lorsque le champ perd le focus |
|
dsa-change |
Émis lorsque la valeur du champ de saisie change |
|
dsa-focus |
Émis lorsque le champ obtient le focus |
|
dsa-input |
Émis lorsque le champ de saisie reçois une entrée |
|
dsa-invalid |
Émis lorsque le contrôle de formulaire vérifie la validité du champ et que les contraintes ne sont pas respectées |