1400 lines
99 KiB
Plaintext
1400 lines
99 KiB
Plaintext
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
|
page ComboBoxDetail {
|
|
layout = "showcase"
|
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Default autocomplete"
|
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? "combobox-1"
|
|
state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
|
|
state playground_options = JSON.parse(ctx.url.searchParams.get("pg_options") ?? "[{\"value\":\"design\",\"label\":\"Design\",\"description\":\"Product and visual design\",\"icon\":\"icon-[lucide--palette]\",\"color\":\"#8b5cf6\",\"avatar\":\"/showcase-images/avatar-design.svg\"},{\"value\":\"engineering\",\"label\":\"Engineering\",\"description\":\"Platform and application engineering\",\"icon\":\"icon-[lucide--code-2]\",\"color\":\"#0ea5e9\",\"avatar\":\"/showcase-images/avatar-engineering.svg\"},{\"value\":\"growth\",\"label\":\"Growth\",\"description\":\"Marketing and customer growth\",\"icon\":\"icon-[lucide--trending-up]\",\"color\":\"#10b981\",\"avatar\":\"/showcase-images/avatar-growth.svg\"},{\"value\":\"support\",\"label\":\"Support\",\"description\":\"Customer operations\",\"icon\":\"icon-[lucide--life-buoy]\",\"color\":\"#f59e0b\"}]")
|
|
state playground_groups = JSON.parse(ctx.url.searchParams.get("pg_groups") ?? "[]")
|
|
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Search teams"
|
|
state playground_searchPlaceholder = ctx.url.searchParams.get("pg_searchPlaceholder") ?? "Start typing…"
|
|
state playground_clearable = (ctx.url.searchParams.get("pg_clearable") ?? "true") === "true"
|
|
state playground_allowCustomValue = (ctx.url.searchParams.get("pg_allowCustomValue") ?? "false") === "true"
|
|
state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
|
|
state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
|
|
state playground_invalid = (ctx.url.searchParams.get("pg_invalid") ?? "false") === "true"
|
|
state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? ""
|
|
state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? ""
|
|
state playground_loading = (ctx.url.searchParams.get("pg_loading") ?? "false") === "true"
|
|
state playground_loadingLabel = ctx.url.searchParams.get("pg_loadingLabel") ?? "Loading suggestions…"
|
|
state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "No matching options"
|
|
state playground_clearLabel = ctx.url.searchParams.get("pg_clearLabel") ?? "Clear value"
|
|
state playground_toggleLabel = ctx.url.searchParams.get("pg_toggleLabel") ?? "Toggle suggestions"
|
|
state playground_searchMode = ctx.url.searchParams.get("pg_searchMode") ?? "contains"
|
|
state playground_searchFields = ctx.url.searchParams.get("pg_searchFields") ?? "label,description"
|
|
state playground_minSearchLength = Number(ctx.url.searchParams.get("pg_minSearchLength") ?? "0")
|
|
state playground_searchResultLimit = Number(ctx.url.searchParams.get("pg_searchResultLimit") ?? "0")
|
|
state playground_optionTemplate = ctx.url.searchParams.get("pg_optionTemplate") ?? "default"
|
|
state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
|
|
state playground_closeOnSelect = (ctx.url.searchParams.get("pg_closeOnSelect") ?? "true") === "true"
|
|
state playground_fixed = (ctx.url.searchParams.get("pg_fixed") ?? "false") === "true"
|
|
state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
|
|
state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "off"
|
|
state playground_remote = (ctx.url.searchParams.get("pg_remote") ?? "false") === "true"
|
|
state playground_remoteUrl = ctx.url.searchParams.get("pg_remoteUrl") ?? ""
|
|
state playground_remoteQueryParam = ctx.url.searchParams.get("pg_remoteQueryParam") ?? "q"
|
|
state playground_remoteDebounce = Number(ctx.url.searchParams.get("pg_remoteDebounce") ?? "250")
|
|
state playground_remoteAutoLoad = (ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true") === "true"
|
|
state playground_infinite = (ctx.url.searchParams.get("pg_infinite") ?? "false") === "true"
|
|
state playground_hasMore = (ctx.url.searchParams.get("pg_hasMore") ?? "false") === "true"
|
|
state playground_page = Number(ctx.url.searchParams.get("pg_page") ?? "1")
|
|
state playground_loadMoreLabel = ctx.url.searchParams.get("pg_loadMoreLabel") ?? "Load more"
|
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
|
seo {
|
|
title = "Combo Box"
|
|
description = "Editable autocomplete combobox with local and remote suggestions."
|
|
}
|
|
view {
|
|
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
|
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/advanced-forms">Advanced Forms</a><span aria-hidden="true">/</span><span>Combo Box</span>
|
|
</nav>
|
|
<header class="detail-hero">
|
|
<div class="detail-hero-copy">
|
|
<span class="showcase-eyebrow">Advanced Forms component</span>
|
|
<h1>Combo Box</h1>
|
|
<p>Editable autocomplete combobox with local and remote suggestions.</p>
|
|
<div class="detail-badges"><span>41 props</span><span>0 slots</span><span>8 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
|
</div>
|
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
|
</header>
|
|
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="ComboBox" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="search,select,change,clear,open,close,load,error">
|
|
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Combo Box</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
|
|
<div class="playground-workbench">
|
|
<div class="playground-preview">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="playground-preview-source" data-playground-preview><ComboBox size='{playground_size}' color='{playground_color}' label='{playground_label}' name='{playground_name}' value='{playground_value}' options='{playground_options}' groups='{playground_groups}' placeholder='{playground_placeholder}' searchPlaceholder='{playground_searchPlaceholder}' clearable='{playground_clearable}' allowCustomValue='{playground_allowCustomValue}' disabled='{playground_disabled}' required='{playground_required}' invalid='{playground_invalid}' validationMessage='{playground_validationMessage}' helpText='{playground_helpText}' loading='{playground_loading}' loadingLabel='{playground_loadingLabel}' emptyLabel='{playground_emptyLabel}' clearLabel='{playground_clearLabel}' toggleLabel='{playground_toggleLabel}' searchMode='{playground_searchMode}' searchFields='{playground_searchFields}' minSearchLength='{playground_minSearchLength}' searchResultLimit='{playground_searchResultLimit}' optionTemplate='{playground_optionTemplate}' defaultOpen='{playground_defaultOpen}' closeOnSelect='{playground_closeOnSelect}' fixed='{playground_fixed}' placement='{playground_placement}' autocomplete='{playground_autocomplete}' remote='{playground_remote}' remoteUrl='{playground_remoteUrl}' remoteQueryParam='{playground_remoteQueryParam}' remoteDebounce='{playground_remoteDebounce}' remoteAutoLoad='{playground_remoteAutoLoad}' infinite='{playground_infinite}' hasMore='{playground_hasMore}' page='{playground_page}' loadMoreLabel='{playground_loadMoreLabel}' class='{playground_class}' /></div>
|
|
<section class="playground-code" aria-label="Current component code">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
|
<pre><code data-playground-code><ComboBox
|
|
label="Default autocomplete"
|
|
name="combobox-1"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
/></code></pre>
|
|
</section>
|
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
|
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
|
|
</div>
|
|
<form class="playground-controls" data-playground-form>
|
|
<header><div><span>Component props</span><strong>41 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
|
<div class="playground-fields"><label class="playground-field" for="playground-combo-box-size"><span><strong>size</strong><small>string</small></span><select id="playground-combo-box-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-combo-box-color"><span><strong>color</strong><small>string</small></span><select id="playground-combo-box-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-combo-box-label"><span><strong>label</strong><small>string</small></span><input id="playground-combo-box-label" name="pg_label" type="text" value="Default autocomplete" /></label><label class="playground-field" for="playground-combo-box-name"><span><strong>name</strong><small>string</small></span><input id="playground-combo-box-name" name="pg_name" type="text" value="combobox-1" /></label><label class="playground-field" for="playground-combo-box-value"><span><strong>value</strong><small>string</small></span><input id="playground-combo-box-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-options"><span><strong>options</strong><small>unknown[]</small></span><textarea id="playground-combo-box-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-combo-box-groups"><span><strong>groups</strong><small>unknown[]</small></span><textarea id="playground-combo-box-groups" name="pg_groups" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-combo-box-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-combo-box-placeholder" name="pg_placeholder" type="text" value="Search teams" /></label><label class="playground-field" for="playground-combo-box-searchPlaceholder"><span><strong>search Placeholder</strong><small>string</small></span><input id="playground-combo-box-searchPlaceholder" name="pg_searchPlaceholder" type="text" value="Start typing…" /></label><label class="playground-toggle" for="playground-combo-box-clearable"><span><strong>clearable</strong><small>boolean</small></span><input id="playground-combo-box-clearable" name="pg_clearable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-allowCustomValue"><span><strong>allow Custom Value</strong><small>boolean</small></span><input id="playground-combo-box-allowCustomValue" name="pg_allowCustomValue" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-combo-box-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-combo-box-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-combo-box-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-validationMessage"><span><strong>validation Message</strong><small>string</small></span><input id="playground-combo-box-validationMessage" name="pg_validationMessage" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-combo-box-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-toggle" for="playground-combo-box-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-combo-box-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-combo-box-loadingLabel" name="pg_loadingLabel" type="text" value="Loading suggestions…" /></label><label class="playground-field" for="playground-combo-box-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-combo-box-emptyLabel" name="pg_emptyLabel" type="text" value="No matching options" /></label><label class="playground-field" for="playground-combo-box-clearLabel"><span><strong>clear Label</strong><small>string</small></span><input id="playground-combo-box-clearLabel" name="pg_clearLabel" type="text" value="Clear value" /></label><label class="playground-field" for="playground-combo-box-toggleLabel"><span><strong>toggle Label</strong><small>string</small></span><input id="playground-combo-box-toggleLabel" name="pg_toggleLabel" type="text" value="Toggle suggestions" /></label><label class="playground-field" for="playground-combo-box-searchMode"><span><strong>search Mode</strong><small>string</small></span><input id="playground-combo-box-searchMode" name="pg_searchMode" type="text" value="contains" /></label><label class="playground-field" for="playground-combo-box-searchFields"><span><strong>search Fields</strong><small>string</small></span><input id="playground-combo-box-searchFields" name="pg_searchFields" type="text" value="label,description" /></label><label class="playground-field" for="playground-combo-box-minSearchLength"><span><strong>min Search Length</strong><small>number</small></span><input id="playground-combo-box-minSearchLength" name="pg_minSearchLength" type="number" value="0" /></label><label class="playground-field" for="playground-combo-box-searchResultLimit"><span><strong>search Result Limit</strong><small>number</small></span><input id="playground-combo-box-searchResultLimit" name="pg_searchResultLimit" type="number" value="0" /></label><label class="playground-field" for="playground-combo-box-optionTemplate"><span><strong>option Template</strong><small>string</small></span><input id="playground-combo-box-optionTemplate" name="pg_optionTemplate" type="text" value="default" /></label><label class="playground-toggle" for="playground-combo-box-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-combo-box-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-combo-box-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-fixed"><span><strong>fixed</strong><small>boolean</small></span><input id="playground-combo-box-fixed" name="pg_fixed" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-combo-box-placement" name="pg_placement"><option value="bottom" selected>bottom</option><option value="top">top</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-combo-box-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-combo-box-autocomplete" name="pg_autocomplete" type="text" value="off" /></label><label class="playground-toggle" for="playground-combo-box-remote"><span><strong>remote</strong><small>boolean</small></span><input id="playground-combo-box-remote" name="pg_remote" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-remoteUrl"><span><strong>remote Url</strong><small>string</small></span><input id="playground-combo-box-remoteUrl" name="pg_remoteUrl" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-remoteQueryParam"><span><strong>remote Query Param</strong><small>string</small></span><input id="playground-combo-box-remoteQueryParam" name="pg_remoteQueryParam" type="text" value="q" /></label><label class="playground-field" for="playground-combo-box-remoteDebounce"><span><strong>remote Debounce</strong><small>number</small></span><input id="playground-combo-box-remoteDebounce" name="pg_remoteDebounce" type="number" value="250" /></label><label class="playground-toggle" for="playground-combo-box-remoteAutoLoad"><span><strong>remote Auto Load</strong><small>boolean</small></span><input id="playground-combo-box-remoteAutoLoad" name="pg_remoteAutoLoad" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-infinite"><span><strong>infinite</strong><small>boolean</small></span><input id="playground-combo-box-infinite" name="pg_infinite" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-hasMore"><span><strong>has More</strong><small>boolean</small></span><input id="playground-combo-box-hasMore" name="pg_hasMore" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-page"><span><strong>page</strong><small>number</small></span><input id="playground-combo-box-page" name="pg_page" type="number" value="1" /></label><label class="playground-field" for="playground-combo-box-loadMoreLabel"><span><strong>load More Label</strong><small>string</small></span><input id="playground-combo-box-loadMoreLabel" name="pg_loadMoreLabel" type="text" value="Load more" /></label><label class="playground-field" for="playground-combo-box-class"><span><strong>class</strong><small>string</small></span><input id="playground-combo-box-class" name="pg_class" type="text" value="" /></label></div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
<div class="detail-layout">
|
|
<main class="detail-content">
|
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Autocomplete</span><h2>Default autocomplete</h2><p>Live default autocomplete combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">01</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-1" class="demo-canvas demo-canvas--1">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Default autocomplete" name="combobox-1" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Default autocomplete usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Default autocomplete"
|
|
name="combobox-1"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Autocomplete</span><h2>Local HTML options</h2><p>Live local html options combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">02</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-2" class="demo-canvas demo-canvas--2">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Local HTML options" name="combobox-2" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Local HTML options usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Local HTML options"
|
|
name="combobox-2"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Autocomplete</span><h2>Grouped suggestions</h2><p>Live grouped suggestions combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">03</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-3" class="demo-canvas demo-canvas--3">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Grouped suggestions" name="combobox-3" value="" options='[]' groups='[{"label":"Product","options":[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]}]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Grouped suggestions usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Grouped suggestions"
|
|
name="combobox-3"
|
|
options='[]'
|
|
groups='[
|
|
<span>{</span>
|
|
"label": "Product",
|
|
"options": [
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>
|
|
]
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"label": "Business",
|
|
"options": [
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]
|
|
<span>}</span>
|
|
]'
|
|
placeholder="Search teams"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Autocomplete</span><h2>Minimum search length</h2><p>Live minimum search length combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">04</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-4" class="demo-canvas demo-canvas--4">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Minimum search length" name="combobox-4" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="3" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Minimum search length usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Minimum search length"
|
|
name="combobox-4"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
minSearchLength="3"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Autocomplete</span><h2>Search result limit</h2><p>Live search result limit combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">05</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-5" class="demo-canvas demo-canvas--5">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Search result limit" name="combobox-5" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="2" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Search result limit usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Search result limit"
|
|
name="combobox-5"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
searchResultLimit="2"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Autocomplete</span><h2>Starts-with matching</h2><p>Live starts-with matching combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">06</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-6" class="demo-canvas demo-canvas--6">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Starts-with matching" name="combobox-6" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="startsWith" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Starts-with matching usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Starts-with matching"
|
|
name="combobox-6"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
searchMode="startsWith"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Autocomplete</span><h2>Search labels and descriptions</h2><p>Live search labels and descriptions combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">07</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-7" class="demo-canvas demo-canvas--7">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Search labels and descriptions" name="combobox-7" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Search labels and descriptions usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Search labels and descriptions"
|
|
name="combobox-7"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Templates & states</span><h2>Suggestions with icons</h2><p>Live suggestions with icons combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">08</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-8" class="demo-canvas demo-canvas--8">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Suggestions with icons" name="combobox-8" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Suggestions with icons usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Suggestions with icons"
|
|
name="combobox-8"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
optionTemplate="icon"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Templates & states</span><h2>Suggestions with avatars</h2><p>Live suggestions with avatars combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">09</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-9" class="demo-canvas demo-canvas--9">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Suggestions with avatars" name="combobox-9" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="avatar" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Suggestions with avatars usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Suggestions with avatars"
|
|
name="combobox-9"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
optionTemplate="avatar"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Templates & states</span><h2>Suggestions with color indicators</h2><p>Live suggestions with color indicators combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">010</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-10" class="demo-canvas demo-canvas--10">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Suggestions with color indicators" name="combobox-10" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="color" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Suggestions with color indicators usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Suggestions with color indicators"
|
|
name="combobox-10"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
optionTemplate="color"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Templates & states</span><h2>Clearable value</h2><p>Live clearable value combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">011</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-11" class="demo-canvas demo-canvas--11">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Clearable value" name="combobox-11" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Clearable value usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Clearable value"
|
|
name="combobox-11"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Templates & states</span><h2>Custom text values</h2><p>Live custom text values combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">012</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-12" class="demo-canvas demo-canvas--12">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Custom text values" name="combobox-12" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Custom text values usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Custom text values"
|
|
name="combobox-12"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
allowCustomValue="true"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Templates & states</span><h2>Preselected value</h2><p>Live preselected value combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">013</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-13" class="demo-canvas demo-canvas--13">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Preselected value" name="combobox-13" value="engineering" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Preselected value usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Preselected value"
|
|
name="combobox-13"
|
|
value="engineering"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Templates & states</span><h2>Disabled combobox</h2><p>Live disabled combobox combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">014</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-14" class="demo-canvas demo-canvas--14">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Disabled combobox" name="combobox-14" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Disabled combobox usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Disabled combobox"
|
|
name="combobox-14"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
disabled="true"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Templates & states</span><h2>Validation state</h2><p>Live validation state combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">015</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-15" class="demo-canvas demo-canvas--15">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><form data-schema="combobox-validation" class="demo-validation-form"><ComboBox label="Validation state" name="combobox-15" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Validation state usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Validation state"
|
|
name="combobox-15"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
required="true"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Remote & API</span><h2>Remote data with automatic preload</h2><p>Live remote data with automatic preload combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">016</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-16" class="demo-canvas demo-canvas--16">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Remote data with automatic preload" name="combobox-16" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Remote data with automatic preload usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Remote data with automatic preload"
|
|
name="combobox-16"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search remote teams"
|
|
minSearchLength="2"
|
|
remote="true"
|
|
remoteUrl="/api/teams"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Remote & API</span><h2>Remote search API</h2><p>Live remote search api combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">017</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-17" class="demo-canvas demo-canvas--17">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Remote search API" name="combobox-17" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Remote search API usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Remote search API"
|
|
name="combobox-17"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search remote teams"
|
|
minSearchLength="2"
|
|
remote="true"
|
|
remoteUrl="/api/teams"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Remote & API</span><h2>Remote query parameters</h2><p>Live remote query parameters combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">018</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-18" class="demo-canvas demo-canvas--18">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Remote query parameters" name="combobox-18" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Remote query parameters usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Remote query parameters"
|
|
name="combobox-18"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search remote teams"
|
|
minSearchLength="2"
|
|
remote="true"
|
|
remoteUrl="/api/teams"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Remote & API</span><h2>Infinite remote suggestions</h2><p>Live infinite remote suggestions combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">019</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-19" class="demo-canvas demo-canvas--19">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Infinite remote suggestions" name="combobox-19" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="true" hasMore="true" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Infinite remote suggestions usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Infinite remote suggestions"
|
|
name="combobox-19"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search remote teams"
|
|
minSearchLength="2"
|
|
remote="true"
|
|
remoteUrl="/api/teams"
|
|
infinite="true"
|
|
hasMore="true"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Remote & API</span><h2>Fixed-position suggestions</h2><p>Live fixed-position suggestions combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">020</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-20" class="demo-canvas demo-canvas--20">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="Fixed-position suggestions" name="combobox-20" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="true" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Fixed-position suggestions usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="Fixed-position suggestions"
|
|
name="combobox-20"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
fixed="true"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Remote & API</span><h2>JavaScript methods</h2><p>Live javascript methods combobox with editable autocomplete and copyable component code.</p></div>
|
|
<span class="demo-case-number">021</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="combo-box-demo-21" class="demo-canvas demo-canvas--21">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><ComboBox label="JavaScript methods" name="combobox-21" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="JavaScript methods usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><ComboBox
|
|
label="JavaScript methods"
|
|
name="combobox-21"
|
|
options='[
|
|
<span>{</span>
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "/showcase-images/avatar-design.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "/showcase-images/avatar-engineering.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "/showcase-images/avatar-growth.svg"
|
|
<span>}</span>,
|
|
<span>{</span>
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
<span>}</span>
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article></div></section>
|
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@search</code><span>Fires when the current search query changes.</span></div><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@clear</code><span>Fires after the current value or selection is cleared.</span></div><div><code>@open</code><span>Fires after the component opens.</span></div><div><code>@close</code><span>Fires after the component closes.</span></div><div><code>@load</code><span>Fires after remote or deferred content loads successfully.</span></div><div><code>@error</code><span>Fires when the component cannot complete an operation.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code><ComboBox
|
|
@search='console.log(payload)'
|
|
@select='console.log(payload)'
|
|
@change='console.log(payload)'
|
|
@clear='console.log(payload)'
|
|
@open='console.log(payload)'
|
|
@close='console.log(payload)'
|
|
@load='console.log(payload)'
|
|
@error='console.log(payload)'
|
|
/></code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>{</span> registerOutputHandler <span>}</span> from "@wrnexus/csr/outputs"
|
|
|
|
const component = document.querySelector("[data-ui-component=\"ComboBox\"], [data-component=\"ComboBox\"]")
|
|
|
|
if (component) registerOutputHandler(component, "search", (payload) => <span>{</span>
|
|
console.log("search", payload)
|
|
<span>}</span>)
|
|
|
|
if (component) registerOutputHandler(component, "select", (payload) => <span>{</span>
|
|
console.log("select", payload)
|
|
<span>}</span>)
|
|
|
|
if (component) registerOutputHandler(component, "change", (payload) => <span>{</span>
|
|
console.log("change", payload)
|
|
<span>}</span>)
|
|
|
|
if (component) registerOutputHandler(component, "clear", (payload) => <span>{</span>
|
|
console.log("clear", payload)
|
|
<span>}</span>)
|
|
|
|
if (component) registerOutputHandler(component, "open", (payload) => <span>{</span>
|
|
console.log("open", payload)
|
|
<span>}</span>)
|
|
|
|
if (component) registerOutputHandler(component, "close", (payload) => <span>{</span>
|
|
console.log("close", payload)
|
|
<span>}</span>)
|
|
|
|
if (component) registerOutputHandler(component, "load", (payload) => <span>{</span>
|
|
console.log("load", payload)
|
|
<span>}</span>)
|
|
|
|
if (component) registerOutputHandler(component, "error", (payload) => <span>{</span>
|
|
console.log("error", payload)
|
|
<span>}</span>)</code></pre></section></div></div></section>
|
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"ComboBox"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>options</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>groups</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Search or select an option"</code></td><td>No</td></tr><tr><td><code>searchPlaceholder</code></td><td>string</td><td><code>"Start typing…"</code></td><td>No</td></tr><tr><td><code>clearable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>allowCustomValue</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>validationMessage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helpText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading suggestions…"</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"No matching options"</code></td><td>No</td></tr><tr><td><code>clearLabel</code></td><td>string</td><td><code>"Clear value"</code></td><td>No</td></tr><tr><td><code>toggleLabel</code></td><td>string</td><td><code>"Toggle suggestions"</code></td><td>No</td></tr><tr><td><code>searchMode</code></td><td>string</td><td><code>"contains"</code></td><td>No</td></tr><tr><td><code>searchFields</code></td><td>string</td><td><code>"label,description"</code></td><td>No</td></tr><tr><td><code>minSearchLength</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>searchResultLimit</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>optionTemplate</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>closeOnSelect</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fixed</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>"off"</code></td><td>No</td></tr><tr><td><code>remote</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>remoteUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>remoteQueryParam</code></td><td>string</td><td><code>"q"</code></td><td>No</td></tr><tr><td><code>remoteDebounce</code></td><td>number</td><td><code>250</code></td><td>No</td></tr><tr><td><code>remoteAutoLoad</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>infinite</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>hasMore</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>page</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>loadMoreLabel</code></td><td>string</td><td><code>"Load more"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
|
</main>
|
|
<aside class="detail-aside">
|
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#combo-box-demo-1">Default autocomplete</a><a href="#combo-box-demo-2">Local HTML options</a><a href="#combo-box-demo-3">Grouped suggestions</a><a href="#combo-box-demo-4">Minimum search length</a><a href="#combo-box-demo-5">Search result limit</a><a href="#combo-box-demo-6">Starts-with matching</a><a href="#combo-box-demo-7">Search labels and descriptions</a><a href="#combo-box-demo-8">Suggestions with icons</a><a href="#combo-box-demo-9">Suggestions with avatars</a><a href="#combo-box-demo-10">Suggestions with color indicators</a><a href="#combo-box-demo-11">Clearable value</a><a href="#combo-box-demo-12">Custom text values</a><a href="#combo-box-demo-13">Preselected value</a><a href="#combo-box-demo-14">Disabled combobox</a><a href="#combo-box-demo-15">Validation state</a><a href="#combo-box-demo-16">Remote data with automatic preload</a><a href="#combo-box-demo-17">Remote search API</a><a href="#combo-box-demo-18">Remote query parameters</a><a href="#combo-box-demo-19">Infinite remote suggestions</a><a href="#combo-box-demo-20">Fixed-position suggestions</a><a href="#combo-box-demo-21">JavaScript methods</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
|
</aside>
|
|
</div>
|
|
<nav class="detail-pagination">
|
|
<a href="/components/advanced-select"><small>Previous</small><strong>← Advanced Select</strong></a>
|
|
<a href="/components/input-number"><small>Next</small><strong>Input Number →</strong></a>
|
|
</nav>
|
|
}
|
|
}
|