HextaUI
150Get started
HextaUI

Token input (UI SDK): Right to left

The editor follows the page’s direction, and a token stays one piece inside right-to-left text.

اشرح ​routes.ts file​ في جملتين.
import {
  TokenInput,
  TokenInputEditor,
  type TokenInputValue,
} from "@/components/ui/ui-sdk-token-input"

const draft: TokenInputValue = [
  "اشرح ",
  { type: "file", value: "src/routes.ts", label: "routes.ts" },
  " في جملتين.",
]

function UiSdkTokenInputRtl() {
  return (
    <div dir="rtl" className="w-full max-w-md">
      <TokenInput defaultValue={draft}>
        <TokenInputEditor aria-label="الطلب" />
      </TokenInput>
    </div>
  )
}

export { UiSdkTokenInputRtl }

Add this example

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

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