# Share Link

> A link to share as a read-only field, with Copy that slips to Copied for a moment and back.

- Name: `share-link`
- Status: beta
- Categories: people, forms, actions
- File: the install writes `share-link.tsx` to your `ui` alias, `@/components/ui` by default.
- npm packages: `lucide-react`. The install adds them.
- Other registry items: `@arbokui/button`, `@arbokui/field-frame`, `@arbokui/input`. The install adds them.
- Gallery: https://arbokui.com/components/share-link
- Registry item: https://arbokui.com/r/share-link.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the component:

   ```bash
   npx shadcn@latest add @arbokui/share-link
   ```

## Use it for

- The link in a share sheet, an invite, or a guest pass: people see it, select it, and copy it.
- Say what the link lets people do, and until when, in hint: "View only until Sat 3 Oct, midnight. You can see who opened it."
- Focusing the link selects it all. Copy puts exactly url on the clipboard, then says Copied for a moment.
- If the page can't copy, the link is left selected and the field says so under it.
- It keeps its size inside a Sheet. Pass size="lg" there if the sheet's other fields are large.

## Avoid it for

- Sending the link. It only copies. Put Send or Share in the sheet's actions.
- A link people should edit. Use Input.
- A secret, like a password or an API key. Anyone who sees the screen can read the link.

## Props

- `url`: `string`. Required. The link to share. Copy puts exactly this on the clipboard.
- `label`: `ReactNode`. The small field label above, like "Link". It names the field.
- `hint`: `ReactNode`. What the link lets people do, and until when. It describes the field.
- `onCopy`: `(url: string) => void`. Runs after the link is copied.
- `size`: `"sm" | "md" | "lg"`. Default `"md"`. Height and text size. Horizontal padding stays aligned across sizes. The same heights as Input.
- `id`: `string`. The input's id, in place of its own. aria-\* and data-\* props land on the input too.
- `ref`: `Ref<HTMLInputElement>`. Reaches the input.
- `className`: `string`. Extra classes on the whole field. Later classes win.

## Accessibility

- The link is a read-only text field named by label and described by hint. Give it a label, or an aria-label when there is none.
- Copy is a button named "Copy link", then "Link copied". A polite live region says "Link copied" once.
- If the copy fails, focus moves to the link, it is selected, and the note under the field says so, read once.
- The icon is hidden from screen readers. The focus ring goes around the whole box while the link has focus.

## Examples

### In a share sheet

```tsx
<ShareLink
  label="Link"
  url="https://example.com/s/team/h8tq2m"
  hint="View only until Sat 3 Oct, midnight. You can see who opened it."
/>
```