Skip to main content
Kaleidoscope

CopyInput

HW

A readonly TextInput combined with a Button to copy its content to the clipboard. Use to copy text such as urls, ids, or keys.

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

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

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

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

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.