# Token input (UI SDK): Submit shortcut

> With `submitShortcut="mod+enter"`, Enter adds a line and Command or Control+Enter sends, which many Japanese and Chinese writers prefer.

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

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-submit-shortcut.json
```

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

## Source

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

import * as React from "react"

import { Kbd } from "@/components/ui/kbd"
import {
  TokenInput,
  TokenInputEditor,
  toLabel,
} from "@/components/ui/ui-sdk-token-input"

function UiSdkTokenInputSubmitShortcut() {
  const [sent, setSent] = React.useState<string | null>(null)

  return (
    <div className="flex w-full max-w-md flex-col gap-2">
      <TokenInput
        submitShortcut="mod+enter"
        onSubmit={(value) => setSent(toLabel(value))}
      >
        <TokenInputEditor
          aria-label="Message"
          placeholder="Write a message. Enter adds a line."
        />
      </TokenInput>
      <p
        role="status"
        className="flex flex-wrap items-center gap-1.5 text-sm wrap-anywhere text-muted-foreground"
      >
        {sent ? (
          "Sent: " + sent
        ) : (
          <>
            Send with <Kbd>⌘</Kbd>
            <Kbd>Enter</Kbd> or <Kbd>Ctrl</Kbd>
            <Kbd>Enter</Kbd>
          </>
        )}
      </p>
    </div>
  )
}

export { UiSdkTokenInputSubmitShortcut }
```

## Props in this example

### TokenInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onSubmit` | `(value, details) => void` | – | Runs on the submit shortcut, unless a menu is open or an input method is composing. |
| `submitShortcut` | `"enter" \| "mod+enter"` | `"enter"` |  |

### TokenInputEditor

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `placeholder` | `string` | – | Shown through aria-placeholder while the input is empty. |

## 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)
- [Custom codec](https://hextaui.com/docs/ui-sdk-token-input/examples/codec)
- [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)