Default

CopyInput renders a TextInput with a Button that copies its value to the clipboard.

Editable example
<CopyInput
  label="Public link"
  value="https://team.qwilr.com/dY9LNAXTmi1Z"
/>
<CopyInput
  label="Public link"
  value="https://team.qwilr.com/dY9LNAXTmi1Z"
/>

Best practices

1. Use a label that accurately describes the text inside the input. E.g. instead of using Copy, describe the content with Public link.
2. CopyInput is great for giving a preview of what will actually be copied to the user's clipboard. If this isn't important, or if there is limited available space, using the CopyToClipboard behavior could be a better fit.

Hidden label

The label can be visually hidden for situations where it's visually clear what the input is for based on its context.

Editable example
<CopyInput
  labelHidden
  label="Public url (still here for screen readers)"
  value="https://team.qwilr.com/dY9LNAXTmi1Z"
/>
<CopyInput
  labelHidden
  label="Public url (still here for screen readers)"
  value="https://team.qwilr.com/dY9LNAXTmi1Z"
/>

Size

CopyInput accepts s, m, or l sizes. The default size is m. Choose a size that is appropriate given the surrounding elements. E.g. if in the same context there are other small sized controls, use a small sized CopyInput.

Editable example
<CopyInput size="l" label="Large" value="https://team.qwilr.com/dY9LNAXTmi1Z" />
<CopyInput size="m" label="Medium" value="https://team.qwilr.com/dY9LNAXTmi1Z" />
<CopyInput size="s" label="Small" value="https://team.qwilr.com/dY9LNAXTmi1Z" />
<CopyInput size="l" label="Large" value="https://team.qwilr.com/dY9LNAXTmi1Z" />
<CopyInput size="m" label="Medium" value="https://team.qwilr.com/dY9LNAXTmi1Z" />
<CopyInput size="s" label="Small" value="https://team.qwilr.com/dY9LNAXTmi1Z" />

Button content

If more context is needed for the copy button, its text can be changed using the buttonContent prop.

Editable example
<CopyInput
  label="Public link"
  buttonContent="Copy link"
  value="https://team.qwilr.com/dY9LNAXTmi1Z"
/>
<CopyInput
  label="Public link"
  buttonContent="Copy link"
  value="https://team.qwilr.com/dY9LNAXTmi1Z"
/>

Accessibility

• Always provide a label. For situations where the label is inferred visually, the labelHidden prop will hide it visually but keep the label readable by assistive technology.