About
A freeform tag/chip input for forms where Enter, comma, or blur commits typed text as a removable token and Backspace clears the last one.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Token Field to your project and fits it to your theme.
Code
How Token Field is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import TokenField from "@/components/ui/token-field";
import { useState } from "react";
export default function TokenFieldDemo() {
const [tokens, setTokens] = useState<readonly string[]>(["design", "react"]);
return (
<div
className="mors-scope flex min-h-[260px] w-full items-center justify-center p-10"
style={{ background: "var(--mors-color-canvas)" }}
>
<div className="w-full max-w-sm">
<TokenField label="Topics" tokens={tokens} onTokensChange={setTokens} />
</div>
</div>
);
}
More by murad-sinatra
View all
Event Calendar
3
Table
2
Command Palette
1
Drawer
1
Toggles
1
Number Field
1
Tooltip
Popover
More in Forms
View all
Premium Auth
524
Contact Card
1K
Book A Demo 1
73
Login 1
53
Form
137
Card Studio
41
SignInPage
668
Modern & Stunning sign in
1.6K
