Status
The component has a health status indicated
Component checklist
Usage
<dsa-radio-group label="Type de document" id="radioGroup">
<dsa-radio>Word</dsa-radio>
<dsa-radio>PDF</dsa-radio>
<dsa-radio>Excel</dsa-radio>
<dsa-radio>Texte</dsa-radio>
</dsa-radio-group>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/radio-group/radio-group.js'
import '@ds-autonomie/web-components/dist/components/radio/radio.js'
import type { DSARadioGroup, DSARadio } from '@ds-autonomie/web-components'
const el = document.querySelector<CNSARadioGroup>('#radioGroup')
if (el !== null) {
console.log(el.value)
}
</script>
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|
description |
Fournit une description au groupe pour une meilleure accessibilité. |
string |
'' |
|
deselectable |
Désélectionne la valeur d'une radio si celle-ci est cliquée une seconde fois |
boolean |
false |
|
disabled |
Désactive les radios enfants |
boolean |
false |
|
error |
Indique si le composant doit être en état d'erreur |
boolean |
false |
|
errorMessage error-message
|
Le ou les messages d’erreur qui sont affichés quand error est à true. Pour afficher plusieurs messages, ils doivent être séparés par un caractère “pipe”: |, e.g. Error 1|Error 2|Error 3 |
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 |
'' |
|
hideLabel |
Cache le label pour éviter des duplications. Assurez-vous qu'il y a un passage de texte visible accolé au champ permettant de comprendre la nature de la saisie attendue. Vous devez toujours fournir un labelvia attribut ou slot. |
boolean |
false |
|
helpText |
Le help-text du champ. Pour afficher du HTML, utilisez le slot help-text |
string |
'' |
|
horizontal
|
Défini l'orientation des radios |
boolean |
false |
|
label |
Le label du champ. Pour afficher du HTML, utilisez le slot label |
string |
'' |
|
name |
Le nom du champ, soumis sous la forme d'une paire nom/valeur avec les données du formulaire |
string |
'option' |
|
readonly |
Place les radios dans un état de lecture seule. |
boolean |
false |
|
required |
Rend le champ obligatoire |
boolean |
false |
|
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 |
|---|---|---|
|
checkValidity() |
Vérifie la validité du champ mais ne montre pas de message de validation |
() => boolean |
|
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 |
Slots
|
Nom |
Description |
|---|---|
|
(défaut) |
Le contenu principal |
|
help-text |
Texte qui décrit comment utiliser le groupe de radio. Alternativement, vous pouvez utiliser l'attribut help-text |
|
label |
Le slot du libellé du groupe de radio. Alternativement, vous pouvez utiliser l'attribut label |
|
tooltip |
Texte qui permet de passer des informations additionnelles à coté du libellé |