SecretFields

Des secrets en écriture seule : les noms se lisent, les valeurs jamais.

Chaque ligne est un nom et une valeur masquée. Les noms déjà enregistrés s'affichent sans leur valeur — le serveur ne la renvoie pas, et ne doit pas la renvoyer. Les champs refusent l'autocomplétion du navigateur, qui proposerait sinon le mot de passe du compte à la place d'une clé d'API.

Après l'envoi, clearSecretValues vide les valeurs : un secret ne reste pas affiché dans un formulaire ouvert.

Installation

sia-ui add secret-fields

Ou par le paquet, sans rien copier :

import { SecretFields, clearSecretValues, secretChanges } from "@sia-ui/react-web";

Props de SecretFields

Prop	Type	Défaut	Description
addButtonProps	Partial<Omit<ButtonProps, "children" | "onClick" | "disabled">>	—	Le bouton d'ajout : variante, taille, icône, classe. Son libellé passe par addLabel.
addLabel	ReactNode	—
className	string	—
defaultValue	SecretEntry[]	—
disabled	boolean	false
keyInputProps	Partial<Omit<InputProps, "value" | "defaultValue" | "aria-describedby" | "onChange" | "disabled" | "invalid">>	—	Le champ du nom : placeholder, taille, classe. La valeur, la saisie et l'état d'erreur, avec son aria-describedby, restent calculés par ligne.
keyLabel	string	—
keyPattern	RegExp	—	La forme d'un nom valide. Par défaut, aucune contrainte.
keyPatternMessage	string	—	Les libellés ci-dessous viennent par défaut du groupe secretFields de la locale.
onValueChange	(entries: SecretEntry[]) => void	—
removeButtonProps	Partial<Omit<IconButtonProps, "onClick" | "label" | "disabled">>	—	Le bouton qui retire une ligne : icône, variante, taille. Son nom reste calculé ligne par ligne — « Retirer API_KEY » — pour que chaque bouton dise lequel il retire.
storedKeys	string[]	[]	Les noms déjà enregistrés côté serveur. Affichés, mais leur valeur reste vide : un secret ne revient jamais au navigateur. Une valeur laissée vide sur l'un d'eux veut dire « inchangé » ; en saisir une, c'est le remplacer — une rotation.
templates	string[]	[]	Des noms proposés d'un clic : DATABASE_URL, API_KEY…
value	SecretEntry[]	—
valueInputProps	Partial<Omit<PasswordInputProps, "value" | "defaultValue" | "onChange" | "disabled" | "autoComplete">>	—	Le champ de la valeur : placeholder, jauge, classe. Pas d'autoComplete : new-password est ce qui empêche le navigateur de proposer le mot de passe du compte à la place du secret.
valueLabel	string	—

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.