Enter free text with selectable inline tokens.
npx shadcn@latest add @preskok/token-fieldimport { TokenFieldValue } from "react-aria-components/TokenField"
import { Token, TokenField } from "@/components/ui/preskok-ui/token-field"
const value = new TokenFieldValue([
{ type: "text", text: "Find " },
{ type: "token", text: "status:available" },
])
export function TokenFieldDemo() {
return (
<TokenField defaultValue={value} label="Inventory query">
{(segment) => <Token>{segment.text}</Token>}
</TokenField>
)
}TokenField uses a TokenFieldValue to represent its sequence of text and token
segments. Extend that value class when the field needs custom tokenization rules.