1339 lines
141 KiB
Plaintext
1339 lines
141 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 = ctx.url.searchParams.get("pg_options") ?? "[\n {\n \"value\": \"design\",\n \"label\": \"Design\",\n \"description\": \"Product and visual design\",\n \"icon\": \"icon-[lucide--palette]\",\n \"color\": \"#8b5cf6\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"engineering\",\n \"label\": \"Engineering\",\n \"description\": \"Platform and application engineering\",\n \"icon\": \"icon-[lucide--code-2]\",\n \"color\": \"#0ea5e9\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"growth\",\n \"label\": \"Growth\",\n \"description\": \"Marketing and customer growth\",\n \"icon\": \"icon-[lucide--trending-up]\",\n \"color\": \"#10b981\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"support\",\n \"label\": \"Support\",\n \"description\": \"Customer operations\",\n \"icon\": \"icon-[lucide--life-buoy]\",\n \"color\": \"#f59e0b\"\n }\n]"
|
|
state playground_groups = 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"
|
|
state playground_allowCustomValue = ctx.url.searchParams.get("pg_allowCustomValue") ?? "false"
|
|
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
|
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
|
state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false"
|
|
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"
|
|
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 = ctx.url.searchParams.get("pg_minSearchLength") ?? "0"
|
|
state playground_searchResultLimit = 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"
|
|
state playground_closeOnSelect = ctx.url.searchParams.get("pg_closeOnSelect") ?? "true"
|
|
state playground_fixed = ctx.url.searchParams.get("pg_fixed") ?? "false"
|
|
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"
|
|
state playground_remoteUrl = ctx.url.searchParams.get("pg_remoteUrl") ?? ""
|
|
state playground_remoteQueryParam = ctx.url.searchParams.get("pg_remoteQueryParam") ?? "q"
|
|
state playground_remoteDebounce = ctx.url.searchParams.get("pg_remoteDebounce") ?? "250"
|
|
state playground_remoteAutoLoad = ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true"
|
|
state playground_infinite = ctx.url.searchParams.get("pg_infinite") ?? "false"
|
|
state playground_hasMore = ctx.url.searchParams.get("pg_hasMore") ?? "false"
|
|
state playground_page = 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 events</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">
|
|
<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><div data-component="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></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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
/></code></pre>
|
|
</section>
|
|
<div class="playground-status" data-playground-status aria-live="polite"></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>string</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": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"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>string</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><select id="playground-combo-box-searchMode" name="pg_searchMode"><option value="contains" selected>contains</option><option value="startsWith">startsWith</option><option value="exact">exact</option></select></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><select id="playground-combo-box-optionTemplate" name="pg_optionTemplate"><option value="default" selected>default</option><option value="icon">icon</option><option value="avatar">avatar</option><option value="color">color</option></select></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><input id="playground-combo-box-placement" name="pg_placement" type="text" value="bottom" /></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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"label": "Product",
|
|
"options": [
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"label": "Business",
|
|
"options": [
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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"></div><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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
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"><div data-component="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":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"},{"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>
|
|
</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='[
|
|
{
|
|
"value": "design",
|
|
"label": "Design",
|
|
"description": "Product and visual design",
|
|
"icon": "icon-[lucide--palette]",
|
|
"color": "#8b5cf6",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "engineering",
|
|
"label": "Engineering",
|
|
"description": "Platform and application engineering",
|
|
"icon": "icon-[lucide--code-2]",
|
|
"color": "#0ea5e9",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "growth",
|
|
"label": "Growth",
|
|
"description": "Marketing and customer growth",
|
|
"icon": "icon-[lucide--trending-up]",
|
|
"color": "#10b981",
|
|
"avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
|
|
},
|
|
{
|
|
"value": "support",
|
|
"label": "Support",
|
|
"description": "Customer operations",
|
|
"icon": "icon-[lucide--life-buoy]",
|
|
"color": "#f59e0b"
|
|
}
|
|
]'
|
|
groups='[]'
|
|
placeholder="Search teams"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article></div></section>
|
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@search</code><span>Fires when the search query changes or is submitted.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@load</code><span>Fires when component data or media finishes loading.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
|
|
|
component.addEventListener('search', (event) => {
|
|
console.log(event.detail)
|
|
})</code></pre></section></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>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>groups</code></td><td>string</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">Events</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/copy-markup"><small>Next</small><strong>Copy Markup →</strong></a>
|
|
</nav>
|
|
}
|
|
}
|