HextaUI
150Get started
HextaUI

Token input (UI SDK): Disabled

A disabled input can’t be focused or changed, hides the remove buttons and submits nothing.

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 UiSdkTokenInputDisabled() {
  return (
    <div className="w-full max-w-md">
      <TokenInput disabled defaultValue={draft}>
        <TokenInputEditor aria-label="Prompt" />
      </TokenInput>
    </div>
  )
}

export { UiSdkTokenInputDisabled }

Add this example

This adds the example as components/examples/ui-sdk-token-input/disabled.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-disabled.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

PropTypeDefault
defaultValue
TokenInputValue–
disabled
booleanfalse

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.

Related components