Token input (UI SDK): Read-only

With readOnly, the text stays focusable, selectable and submitted, but typing, pastes and drops leave it alone.

Summarize README.md file for the release notes.

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

const draft: TokenInputValue = [
  "Summarize ",
  { type: "file", value: "README.md", label: "README.md" },
  " for the release notes.",
]

function UiSdkTokenInputReadOnly() {
  return (
    <div className="w-full max-w-md">
      <TokenInput readOnly defaultValue={draft}>
        <TokenInputEditor aria-label="Prompt" />
      </TokenInput>
    </div>
  )
}

export { UiSdkTokenInputReadOnly }

Add this example

This adds the example as components/examples/ui-sdk-token-input/read-only.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-read-only.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
`defaultValue`	`TokenInputValue`	`–`
`readOnly`	`boolean`	`false`

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.

Add this example

Props in this example

TokenInput

More Token input examples

Related components