Data Input

import { Input } from 'ui-patterns/DataInputs/Input'
 
export function DataInputDemo() {
  return <Input containerClassName="w-full max-w-sm" placeholder="Hello world" />
}

Referred to as Input in code, not DataInput. Also not to be confused with the atomic Input component.

Usage

Read-only values

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.

import { Input } from 'ui-patterns/DataInputs/Input'
 
export function DataInputWithCopy() {
  return <Input containerClassName="w-full max-w-sm" readOnly copy value="1234567890" />
}

Sensitive values

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.

import { Input } from 'ui-patterns/DataInputs/Input'
 
export function DataInputWithRevealCopy() {
  return <Input containerClassName="w-full max-w-sm" readOnly reveal copy value="1234567890" />
}

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.

import { Input } from 'ui-patterns/DataInputs/Input'
 
export function DataInputWithCopySecret() {
  const actualValue = 'sb_secret_1234567890'
  const maskedValue = 'sb_secret_123•••••••'
 
  return (
    <Input
      containerClassName="w-full max-w-sm"
      readOnly
      copy
      value={maskedValue}
      onCopy={() => {
        navigator.clipboard.writeText(actualValue)
      }}
    />
  )
}

Password managers

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
/>