---
title: "Token Field"
description: "A read-only, masked monospace input with reveal and copy-to-clipboard actions for secrets such as bot tokens."
---

A read-only, masked monospace input with reveal and copy-to-clipboard actions for secrets such as bot tokens. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Token Field — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add token-field
``` Registry dependencies, installed with it: form-fields, button.

Files written — React: components/ui/token-field.tsx. Vue: components/ui/token-field/TokenField.vue, components/ui/token-field/index.ts.

## Usage

React:

```tsx
import { TokenField } from "@/components/ui/token-field"
```

Vue:

```ts
import { TokenField } from "@/components/ui/token-field"
```

## API reference

**`TokenField`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | — | The secret value. Masked until revealed. |
| `id` | `string \| undefined` | — | Id forwarded to the input so a label can target it. |
| `name` | `string \| undefined` | — | Accessible name for the input when no visible label is linked. |
| `revealLabel` | `string \| undefined` | — | Label of the reveal button while hidden. |
| `hideLabel` | `string \| undefined` | — | Label of the reveal button while shown. |
| `copyLabel` | `string \| undefined` | — | Label of the copy button. |
| `copiedLabel` | `string \| undefined` | — | Label of the copy button right after copying. |
| `copiedDuration` | `number \| undefined` | — | How long (ms) the copied label is shown. |
| `onCopy` | `() => void \| undefined` | — | Called after the value is written to the clipboard. |

The registry exports `TokenField`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Label the token input, announce copy feedback through a polite live region, and never make the reveal or copy actions icon-only without an accessible name.

## Tokens

Token Field reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.