InputCopy
A read-only field with clipboard action and feedback.
Installation
Import from the Reflow workspace package.
Playground
Open demoimport { InputCopy } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<InputCopy label="Invite link" value="https://reflow.example/invite" />
</>
)
}With Label
import { InputCopy } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<InputCopy label="Install command" value="pnpm add remix @remix-run/ui @remix-run/component" />
</>
)
}Left Aligned
import { InputCopy } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<InputCopy align="left" value="pnpm add remix @remix-run/ui @remix-run/component" />
<InputCopy variant="button" align="left" value="pnpm add remix @remix-run/ui @remix-run/component" />
</>
)
}Disabled
import { InputCopy } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<InputCopy label="Invite code" value="ABCD-1234-EFGH" disabled />
</>
)
}Copy Callback
import { InputCopy } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<InputCopy label="Share link" value="https://reflow.example/r/input-copy" onCopy={() => count++} />
</>
)
}API Reference
Public props for the Reflow implementation. Native controls also accept their standard HTML attributes and Remix event mixes.
InputCopy
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | Text displayed in the field and copied to the clipboard. |
label | string | — | Accessible name or visible label for the control. |
onCopy | (() => void) | — | Called after successfully copying the value. |
disabled | boolean | — | Prevents interaction and conveys the disabled state. |
variant | "button" | "icon" | icon | Visual or layout treatment. |
align | "left" | "right" | right | Horizontal alignment of the action or popup. |
size | "default" | "compact" | — | Control density or icon-button dimensions. |