Statut
-
Component checklist
Fonctionnel
Code source
Lien vers le repository (nous demander les droits)
Storybook
Dernière version publiée
-
Dernière version de modification
Package @ds-autonomie/web-components
2.25.0
Disponible depuis la version
Package @ds-autonomie/web-components
2.25.0
Usage
Composant destiné à être utilisé dans un <dsa-radio-group> pour proposer une option « Autre » qui révèle un champ texte lorsqu'elle est sélectionnée.
Hérite de <dsa-radio> : toutes ses propriétés, méthodes et évènements sont disponibles.
<dsa-radio-group label="Votre situation" name="situation">
<dsa-radio value="salarie">Salarié</dsa-radio>
<dsa-radio value="etudiant">Étudiant</dsa-radio>
<dsa-radio-other
value="autre"
input-name="situation-autre"
input-label="Précisez"
input-required
>
Autre
</dsa-radio-other>
</dsa-radio-group>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/radio-other/radio-other.js';
import type { DSARadioOther } from '@ds-autonomie/web-components';
</script>
API
Attributs et propriétés
Reprend toutes les propriétés de dsa-radio, ainsi que :
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
inputName input-name |
Le nom du champ texte, soumis sous la forme d'une paire nom/valeur avec les données du formulaire. Obligatoire pour que la valeur du champ texte soit envoyée avec le formulaire. |
string |
'' |
|
inputPlaceholder input-placeholder |
Le placeholder du champ texte. |
string |
'' |
|
inputHelpText input-help-text |
Le texte d'aide du champ texte |
string |
'' |
|
inputRequired input-required |
Rend le champ texte obligatoire lorsque la case est cochée |
boolean |
false |
|
inputError input-error |
Indique si le champ texte doit être en état d'erreur. Permet de contrôler l'état d'erreur du champ texte indépendamment de celui de la case à cocher. |
boolean |
false |
|
inputErrorMessage input-error-message |
Message d'erreur associé au champ texte |
string |
'' |
Événements
Les évènements dsa-input et dsa-change émis par le champ texte interne sont interceptés pour éviter d'être confondus avec ceux du radio par un dsa-radio-group parent.
Ils sont réémis sous les noms suivants :
|
Nom |
Description |
|---|---|
|
dsa-other-input |
Émis à chaque frappe dans le champ texte interne |
|
dsa-other-change |
Émis lorsque la valeur du champ texte est validée par l'utilisateur (perte de focus après modification) |