Input mask - Champ de saisie avec masque

Un élément interactif imposant un format spécifique pour un champ de saisie

Exemples

Champ de saisie par défaut


Sur fond gris – "on layer"

Pour adopter le style avec un fond vert, assurez-vous de définir l’attribut variant à layer .


Configurations pré-définies

NIR


                                                        
                                                        
                                                            import { NIRConfig } from '@ds-autonomie/web-components/dist/components/input-mask/input-mask.configs.js'
                                                        
                                                        // Rendu
                                                        <div>
                                                          <dsa-input-mask {...NIRConfig}></dsa-input-mask>
                                                          // ou
                                                          <dsa-input-mask placeholder={NIRConfig.placeholder} pattern={NIRConfig.pattern}></dsa-input-mask>
                                                        </div>
                                                        
                                                            

BIC


                                                        
                                                        
                                                            import { BICConfig } from '@ds-autonomie/web-components/dist/components/input-mask/input-mask.configs.js'
                                                        
                                                        // Rendu
                                                        <div>
                                                          <dsa-input-mask {...BICConfig}></dsa-input-mask>
                                                          // ou
                                                          <dsa-input-mask placeholder={BICConfig.placeholder} pattern={BICConfig.pattern}></dsa-input-mask>
                                                        </div>
                                                        
                                                            

IBAN


                                                        
                                                        
                                                            import { IBANConfig } from '@ds-autonomie/web-components/dist/components/input-mask/input-mask.configs.js'
                                                        
                                                        // Rendu
                                                        <div>
                                                          <dsa-input-mask {...IBANConfig}></dsa-input-mask>
                                                          // ou
                                                          <dsa-input-mask placeholder={IBANConfig.placeholder} pattern={IBANConfig.pattern}></dsa-input-mask>
                                                        </div>
                                                        
                                                            

Tailles

Petit

Grand


États

Désactivé (Disabled)

Lecture seule (Readonly)

Requis (Required)

Succès (Success)

Erreur (Error)

Erreurs multiples


Effaçable (clearable)

Avec icône

Avec icône en suffix

Avec info bulle