Edit Prompt Chip

Name

Also known as (comma separated)

Brief definition Compact selectable prompt.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Chip label", "default": "Explain like I'm five" }, { "id": "selected", "type": "toggle", "label": "Selected", "default": false }, { "id": "variant", "type": "select", "label": "Variant", "default": "filled", "options": [ "filled", "outline" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<span class=\"prompt-chip prompt-chip--{{variant}}\" style=\"--accent:{{accent}};\">\n <input type=\"checkbox\" id=\"prompt-chip-input\" class=\"prompt-chip__input\" {{#if selected}}checked{{/if}}>\n <label for=\"prompt-chip-input\" class=\"prompt-chip__label\">{{label}}</label>\n</span>\n<style>\n.prompt-chip { display: inline-block; font: 14px/1 system-ui, sans-serif; }\n.prompt-chip__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }\n.prompt-chip__label { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; cursor: pointer; user-select: none; border: 1.5px solid var(--accent); }\n.prompt-chip--filled .prompt-chip__label { background: color-mix(in srgb, var(--accent) 22%, #FAF7F2); color: #241430; }\n.prompt-chip--outline .prompt-chip__label { background: transparent; color: #241430; }\n.prompt-chip__input:checked + .prompt-chip__label { background: var(--accent); color: #241430; font-weight: 600; }\n.prompt-chip__input:focus-visible + .prompt-chip__label { outline: 2px solid var(--accent); outline-offset: 2px; }\n.prompt-chip__label:hover { background: color-mix(in srgb, var(--accent) 32%, #FAF7F2); }\n</style>", "tailwind": "<span class=\"prompt-chip-tw prompt-chip-tw--{{variant}} inline-block font-sans text-sm leading-none\" style=\"--accent:{{accent}};\">\n <input type=\"checkbox\" id=\"prompt-chip-tw-input\" class=\"sr-only prompt-chip-tw__input\" {{#if selected}}checked{{/if}}>\n <label for=\"prompt-chip-tw-input\" class=\"prompt-chip-tw__label inline-flex items-center px-3.5 py-2 rounded-full cursor-pointer select-none border-[1.5px]\" style=\"border-color:var(--accent);\">{{label}}</label>\n</span>\n<style>\n.prompt-chip-tw--filled .prompt-chip-tw__label { background: color-mix(in srgb, var(--accent) 22%, #FAF7F2); color: #241430; }\n.prompt-chip-tw--outline .prompt-chip-tw__label { background: transparent; color: #241430; }\n.prompt-chip-tw__input:checked + .prompt-chip-tw__label { background: var(--accent); color: #241430; font-weight: 600; }\n.prompt-chip-tw__input:focus-visible + .prompt-chip-tw__label { outline: 2px solid var(--accent); outline-offset: 2px; }\n.prompt-chip-tw__label:hover { background: color-mix(in srgb, var(--accent) 32%, #FAF7F2); }\n</style>", "react": "import { useId, useState } from \"react\";\n\nexport function PromptChip({\n label = \"{{label}}\",\n selected = {{selected}},\n variant = \"{{variant}}\",\n accent = \"{{accent}}\",\n}) {\n const id = useId();\n const [checked, setChecked] = useState(selected);\n const baseLabel = { display: \"inline-flex\", alignItems: \"center\", padding: \"8px 14px\", borderRadius: 999, cursor: \"pointer\", userSelect: \"none\", border: `1.5px solid ${accent}` };\n const variantLabel = variant === \"filled\"\n ? { background: `color-mix(in srgb, ${accent} 22%, #FAF7F2)`, color: \"#241430\" }\n : { background: \"transparent\", color: \"#241430\" };\n const checkedLabel = checked ? { background: accent, color: \"#241430\", fontWeight: 600 } : {};\n return (\n <span style={{ display: \"inline-block\", font: \"14px/1 system-ui, sans-serif\" }}>\n <input\n type=\"checkbox\"\n id={id}\n checked={checked}\n onChange={(e) => setChecked(e.target.checked)}\n style={{ position: \"absolute\", width: 1, height: 1, overflow: \"hidden\", clip: \"rect(0 0 0 0)\" }}\n />\n <label htmlFor={id} style={{ ...baseLabel, ...variantLabel, ...checkedLabel }}>{label}</label>\n </span>\n );\n}" }