apps/design-system/content/docs/fragments/data-input.mdx
Referred to as Input in code, not DataInput. Also not to be confused with the atomic Input component.
Input should be used for read-only values that can be copied or otherwise interacted with, as the input element is both keyboard and mouse-friendly.
<ComponentPreview name="data-input-with-copy" peekCode wide />Inputs with sensitive values can be both revealed and copied, but only in succession. This reduces the amount of actions on screen, thus simplifying the interface.
<ComponentPreview name="data-input-with-reveal-copy" peekCode wide />Inputs can be edited without revealing their value.
<ComponentPreview name="data-input-with-reveal-copy-editable" peekCode wide />You can also partially truncate the value by overriding the placeholder value.
Consider if the value needs to be revealed in the first place, as only copying is sufficient in most cases.
A happy medium might be to display a partially masked value but saving the actual value in the clipboard. To do this, pass a pre-masked string as the value prop and override the onCopy callback to copy the real value.
In some cases, you may need to add the following attribute to your input to prevent password managers from applying their widgets and dropdowns to the input:
<Input
readOnly
copy
value={name}
data-1p-ignore // 1Password
data-lpignore="true" // LastPass
data-form-type="other" // Dashlane
data-bwignore // Bitwarden
/>