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.

Send with ⌘Enter or CtrlEnter

"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 }

Add this example

This adds the example as components/examples/ui-sdk-token-input/submit-shortcut.tsx, together with the Token input component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/ui-sdk-token-input-submit-shortcut.json

To add only the component, follow the Token input installation.

Props in this example

The Token input props this example sets, from the API reference.

TokenInput

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

TokenInputEditor

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

Every prop is in the Token input API reference.

More Token input examples

See them all, with keyboard support and accessibility notes, on the Token input page.