# Token input (UI SDK): Custom codec

> A codec turns tokens into text and back, here as `<@id>`. With `copy="label"`, copying writes what people read, and pasting back still restores the tokens.

Canonical: https://hextaui.com/docs/ui-sdk-token-input/examples/codec

Component docs: https://hextaui.com/docs/ui-sdk-token-input

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/ui-sdk-token-input-codec.json
```

This adds `components/examples/ui-sdk-token-input/codec.tsx` with the Token input component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-token-input/codec.tsx"
"use client"

import * as React from "react"

import {
  fromText,
  TokenInput,
  TokenInputEditor,
  toText,
  type TokenCodec,
} from "@/components/ui/ui-sdk-token-input"

const chat: TokenCodec = {
  format: (token) => "<@" + token.value + ">",
  parse: (text) =>
    text.split(/(<@[\w.-]+>)/).map((part) => {
      const id = /^<@([\w.-]+)>$/.exec(part)?.[1]
      return id ? { type: "mention", value: id, label: "@" + id } : part
    }),
}

const source = "Ping <@hollis> and <@ines> about the launch"

function UiSdkTokenInputCodec() {
  const [text, setText] = React.useState(source)

  return (
    <div className="flex w-full max-w-md flex-col gap-2">
      <TokenInput
        codec={chat}
        copy="label"
        defaultValue={fromText(source, chat)}
        onValueChange={(value) => setText(toText(value, chat))}
      >
        <TokenInputEditor aria-label="Message" />
      </TokenInput>
      <p className="font-mono text-xs wrap-anywhere text-muted-foreground">
        {text}
      </p>
    </div>
  )
}

export { UiSdkTokenInputCodec }
```

## Props in this example

### TokenInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `TokenInputValue` | – |  |
| `onValueChange` | `(value, details) => void` | – | Runs on typing, pastes, menus, undo and controller calls. details lists the reason and any removed tokens. |
| `copy` | `"codec" \| "label"` | `"codec"` |  |
| `codec` | `TokenCodec` | – |  |

## More Token input examples

- [Prompt](https://hextaui.com/docs/ui-sdk-token-input/examples/prompt)
- [Deleting tokens](https://hextaui.com/docs/ui-sdk-token-input/examples/deletion)
- [Controller](https://hextaui.com/docs/ui-sdk-token-input/examples/controller)
- [Form](https://hextaui.com/docs/ui-sdk-token-input/examples/form)
- [Submit shortcut](https://hextaui.com/docs/ui-sdk-token-input/examples/submit-shortcut)
- [Disabled](https://hextaui.com/docs/ui-sdk-token-input/examples/disabled)
- [Read-only](https://hextaui.com/docs/ui-sdk-token-input/examples/read-only)
- [Right to left](https://hextaui.com/docs/ui-sdk-token-input/examples/rtl)