# Secret field
> API key field hidden under crawling pixel noise; holding the eye wipes the noise away and each character decodes before it locks.
- Element: `<px-secret>`
- React: `import { PxSecret } from "@/components/lumesec/px-secret"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-secret.json
- Page: https://elements.lumesec.ai/components/pixel-lab/secret



Live preview: https://elements.lumesec.ai/view/px-secret

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-secret.js"></script>

<px-secret></px-secret>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/px-secret
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-secret.json
```

## Usage

React:

```tsx
import { PxSecret } from "@/components/lumesec/px-secret";

export function Example() {
  return (
    <PxSecret />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-secret.js"></script>

<px-secret></px-secret>
```

## Behaviour

The key hides under crawling pixel noise. Holding the eye wipes the noise away behind a dithered edge while each character decodes through random glyphs before it locks. Let go and it scrambles shut. The key shown is a fake.

## API reference

### Attributes

| Attribute | React prop | Type     | Default                        | Description                                                                                                                                    |
| --------- | ---------- | -------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `value`   | `value`    | `string` | `sk-demo-4f9Q7xLm2Rk8Vt3nW6pA` | The key to display and copy. The characters are built once when the element first connects; the copy button reads the attribute at click time. |

### Properties

| Property            | Type     | Description                             |
| ------------------- | -------- | --------------------------------------- |
| `value` (read-only) | `string` | The `value` attribute, or the demo key. |

## Keyboard

| Keys                              | Action                                               |
| --------------------------------- | ---------------------------------------------------- |
| Space / Enter (on the eye button) | Reveal while held; releasing the key hides it again. |

## Accessibility

* The eye button has `aria-label="Hold to reveal the key"` and `aria-pressed` reflecting whether it is held.
* The copy button has `aria-label="Copy the key"`.
* The key container carries `aria-label="API key, hidden"`, which changes to include the key once it is fully revealed; the container has no role.
* The hint line below is an `aria-live="polite"` region that reports copy success or failure.
* Reduced motion: the key reveals and hides at once and characters appear without the scramble; the noise layer still moves.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--border`, `--card`, `--foreground`, `--lumesec` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-fg`, `--ui-mono`, `--ui-muted` and `--ui-surface`.

## Notes

* The default value is a fake demo key. Set `value` before the element connects, since the displayed characters are not rebuilt later.
* Copy uses `navigator.clipboard.writeText`; when that is unavailable the hint asks the user to reveal and copy by hand.
* The key stays visible for 0.35 seconds after release before it scrambles shut. The label text "API key" is fixed.