Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.
Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.
Use the design switcher in the header to test this setting live.
The setting is inherited by components, blocks, templates, and playground previews.
Give every control a visible label. Use helperText for instructions and error for actionable feedback. Test Tab, Shift+Tab, Enter and Escape; focus must remain visible and follow the reading order.
<Input label="Email address" type="email" name="email" required="true" helperText="Use your work email." error="Enter a valid email address." />
+<Button label="Save changes" disabled="true" />Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.
Theme-aware, responsive strong password component.
Theme-aware, responsive toggle count component.
Accessible password field with optional show and hide controls.
26 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.
- +Theme-aware, responsive accordion component.
Theme-aware, responsive alert component.
Theme-aware, responsive avatar component.
Theme-aware, responsive avatar group component.
Theme-aware, responsive badge component.
Theme-aware, responsive blockquote component.
Theme-aware, responsive button component.
Theme-aware, responsive button group component.
Supporting content belongs inside the default slot.
Supporting content belongs inside the default slot.
Group related content in a responsive themed surface with title, description, content, and supporting slots.
Theme-aware, responsive carousel component.
Theme-aware, responsive chat bubble component.
Theme-aware, responsive date picker component.
Theme-aware, responsive file upload progress component.
Theme-aware, responsive legend indicator component.
Theme-aware, responsive list group component.
Theme-aware, responsive rating component.
Theme-aware, responsive styled icon component.
Present responsive chronological activity, milestones, or workflow status with rich item metadata.
Theme-aware, responsive tree view component.
Complete responsive sections composed exclusively from the components in this library.
Real sections with live previews and complete source code.
Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.
Open example →Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.
Open example →Present one linked feature or service with media, icon, badge, description, and action.
Open example →Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.
Open example →Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.
Open example →Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.
Open example →Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.
Open example →Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.
Open example →Introduce marketing content with an eyebrow, title, description, and optional linked action.
Open example →Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.
Open example →Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.
Open example →Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.
Open example →Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.
Open example →Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.
Open example →A ready-to-use section. Copy the complete example below.
page AnnouncementBarExample {
+ view {
+ <AnnouncementBar badge="Public notice" badgeIcon="icon-[lucide--sparkles]" message="All composite components are now available" description="Review each component and its recommended use cases." icon="icon-[lucide--megaphone]" actionLabel="View components" actionHref="#components" actionIcon="icon-[lucide--arrow-down]" dismissible="true" dismissLabel="Announcement Bar" sticky="false" compact="false" flush="false" mobileCompact="false" mobileMessageLines="2" hideBadgeOnMobile="false" hideDescriptionOnMobile="false" flushMobile="false" size="default" width="default" variant="soft" class="showcase-instance showcase-instance--1" />
+ }
+}A ready-to-use section. Copy the complete example below.
Add a screenshot, product preview, media block, chart, form, or illustration.
+page CTASectionExample {
+ view {
+ <CTASection eyebrow="Ready to continue" title="Build public pages with reusable components" description="Keep application pages focused on content and business data while the shared UI package owns presentation." icon="icon-[lucide--rocket]" align="split" size="default" variant="gradient" primaryLabel="Use these components" primaryHref="#components" primaryIcon="icon-[lucide--blocks]" secondaryLabel="Back to home" secondaryHref="/" secondaryIcon="icon-[lucide--house]" visualTitle="CTASection example" visualDescription="A polished default ctasection for a modern application." visualItems='[{"id":"ctasection-0-1","key":"ctasection-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#ctasection-demo","actionHref":"#ctasection-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"ctasection-0-2","key":"ctasection-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#ctasection-demo","actionHref":"#ctasection-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' maxWidth="full" fullBleed="false" class="showcase-instance showcase-instance--1"><div data-slot="visual">
+<div class="showcase-visual-panel">
+ <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
+ <strong>Composable visual panel</strong>
+ <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
+</div></div></CTASection>
+ }
+}A ready-to-use section. Copy the complete example below.
page FeatureCardExample {
+ view {
+ <FeatureCard icon="icon-[lucide--shield-check]" iconStyle="soft" eyebrow="Citizen support" title="Citizen services" description="Report incidents, request certificates, and find safety information." href="#citizen-services" external="false" actionLabel="Explore services" showArrow="true" stretchedLink="true" badge="Public" size="default" color="primary" variant="default" hover="lift" align="start" disabled="false" class="showcase-instance showcase-instance--1" />
+ }
+}A ready-to-use section. Copy the complete example below.
page FeatureGridExample {
+ view {
+ <FeatureGrid size="default" items='[{"icon":"icon-[lucide--shield-check]","eyebrow":"Citizen support","title":"Citizen services","description":"Report incidents, request certificates, and find safety information.","href":"#citizen-services","actionLabel":"Explore services","badge":"Public","color":"primary","variant":"default","hover":"lift"},{"icon":"icon-[lucide--map-pin]","eyebrow":"Directory","title":"Station directory","description":"Locate offices, jurisdictions, contacts, and public service hours.","href":"#station-directory","actionLabel":"Find a station","badge":"Directory","color":"info","variant":"soft","hover":"border"},{"icon":"icon-[lucide--radio-tower]","eyebrow":"Verified","title":"Public updates","description":"Publish official alerts, notices, advisories, and verified information.","href":"#public-updates","actionLabel":"View updates","badge":"Live","color":"success","variant":"gradient","hover":"glow"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" align="start" maxWidth="full" variant="default" label="Feature Grid" class="showcase-instance showcase-instance--1" />
+ }
+}A ready-to-use section. Copy the complete example below.
page FeatureIconCardExample {
+ view {
+ <FeatureIconCard icon="icon-[lucide--shield-check]" title="Secure by design" description="Build with consistent validation, accessibility, and theme support." href="#security" actionLabel="Review security" badge="Core" size="default" variant="default" align="start" clickableSurface="false" descriptionTone="A polished default feature icon card for a modern application." class="showcase-instance showcase-instance--1" />
+ }
+}A ready-to-use section. Copy the complete example below.
page FooterExample {
+ view {
+ <Footer size="default" label="Footer" items='[{"type":"header","label":"Product","description":"Build consistent interfaces with WRNexusJS.","items":[{"label":"Components","href":"/base"},{"label":"Themes","href":"/themes"},{"label":"Examples","href":"/blocks"}]},{"type":"header","label":"Developers","items":[{"label":"Documentation","href":"/docs"},{"label":"Installation","href":"/installation"},{"label":"Framework guides","href":"/framework-guides"}]},{"type":"header","label":"Resources","items":[{"label":"Accessibility","href":"/accessibility"},{"label":"Design tokens","href":"/colors"},{"label":"Typography","href":"/fonts"}]},{"type":"header","label":"Company","items":[{"label":"WorkRoot","href":"https://workroot.in","external":true},{"label":"WRNexusJS","href":"https://wrnexusjs.dev","external":true}]}]' columns="4" maxWidth="wide" mobileColumns="2" copyright="© 2026 WRNexusJS. All rights reserved." class="showcase-instance showcase-instance--1" />
+ }
+}A ready-to-use section. Copy the complete example below.
page HeroActionsExample {
+ view {
+ <HeroActions actions='[{"label":"Browse components","href":"#components","icon":"icon-[lucide--blocks]","variant":"primary"},{"label":"View metrics","href":"#metrics","icon":"icon-[lucide--chart-no-axes-column-increasing]","variant":"outline"}]' align="left" orientation="horizontal" stackOnMobile="true" fullWidthMobile="true" size="default" class="showcase-instance showcase-instance--1" />
+ }
+}A ready-to-use section. Copy the complete example below.
Add a screenshot, product preview, media block, chart, form, or illustration.
+page HeroExample {
+ view {
+ <Hero eyebrow="Reusable public UI" eyebrowIcon="icon-[lucide--sparkles]" icon="" title="Build polished pages" highlight="with consistent hero layouts" description="Create strong first impressions for public portals, product pages, and service overviews." align="start" size="default" variant="gradient" layout="split" visualPosition="right" visualStyle="card" showDecorations="true" fullBleed="true" visualTitle="Hero example" visualDescription="A polished default hero for a modern application." visualItems='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' primaryLabel="Explore components" primaryHref="#components" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Read documentation" secondaryHref="#docs" secondaryIcon="icon-[lucide--book-open]" tertiaryLabel="Hero" tertiaryHref="#hero-demo" badges='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' trustItems='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' maxWidth="wide" class="showcase-instance showcase-instance--1"><div data-slot="visual">
+<div class="showcase-visual-panel">
+ <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
+ <strong>Composable visual panel</strong>
+ <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
+</div></div></Hero>
+ }
+}Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.
Open example →Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.
Open example →Present one linked feature or service with media, icon, badge, description, and action.
Open example →Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.
Open example →Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.
Open example →Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.
Open example →Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.
Open example →Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.
Open example →Introduce marketing content with an eyebrow, title, description, and optional linked action.
Open example →Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.
Open example →Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.
Open example →Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.
Open example →Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.
Open example →Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.
Open example →A ready-to-use section. Copy the complete example below.
page MarketingSectionHeaderExample {
+ view {
+ <MarketingSectionHeader eyebrow="Platform capabilities" title="Build complete public experiences" description="Use reusable sections, cards, metrics, heroes, and CTAs." align="split" size="default" actionLabel="Explore components" actionHref="#components" actionIcon="icon-[lucide--arrow-right]" actionExternal="false" class="showcase-instance showcase-instance--1" />
+ }
+}A ready-to-use section. Copy the complete example below.
page MetricGridExample {
+ view {
+ <MetricGrid items='[{"label":"Public services","value":"24","description":"Citizen-facing services available online.","icon":"icon-[lucide--hand-heart]","trend":"+4","trendLabel":"this release","trendDirection":"up","color":"primary"},{"label":"Police stations","value":"126","description":"Searchable station and jurisdiction entries.","icon":"icon-[lucide--landmark]","trend":"Updated","trendLabel":"today","color":"info"},{"label":"Availability","value":"99.9","suffix":"%","description":"Target service availability.","icon":"icon-[lucide--activity]","trend":"Stable","trendLabel":"30 days","trendDirection":"positive","color":"success"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" dividers="false" size="default" variant="default" maxWidth="full" class="showcase-instance showcase-instance--1" />
+ }
+}A ready-to-use section. Copy the complete example below.
page PageHeaderExample {
+ view {
+ <PageHeader eyebrow="Component showcase" title="Page headers with clear hierarchy" description="Use PageHeader for services, directories, legal pages, guides, dashboards, and public information." icon="icon-[lucide--panel-top]" align="start" centered="false" compact="false" size="default" maxWidth="full" showBreadcrumbs="true" breadcrumbs='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' breadcrumbParentHref="#page-header-demo" primaryLabel="Primary action" primaryHref="#primary" primaryIcon="icon-[lucide--arrow-down]" secondaryLabel="Secondary action" secondaryHref="#secondary" secondaryIcon="icon-[lucide--house]" variant="default" borderBottom="true" class="showcase-instance showcase-instance--1" />
+ }
+}A ready-to-use section. Copy the complete example below.
page SectionHeaderExample {
+ view {
+ <SectionHeader eyebrow="Public services" title="Everything citizens need" description="Discover online services, directories, guidance, and verified public information." align="left" size="default" headingLevel="2" maxWidth="3xl" class="showcase-instance showcase-instance--1" />
+ }
+}A ready-to-use section. Copy the complete example below.
Add a screenshot, product preview, media block, chart, form, or illustration.
+page SplitHeroExample {
+ view {
+ <SplitHero eyebrow="Balanced layout" title="Combine detailed content" highlight="with a strong visual panel" description="Use SplitHero for product explanations, department introductions, campaigns, and feature storytelling." primaryLabel="View public services" primaryHref="#services" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Contact department" secondaryHref="#contact" secondaryIcon="icon-[lucide--phone]" visualPosition="right" reverse="false" ratio="balanced" align="start" size="default" variant="default" maxWidth="wide" fullBleed="true" flushMobile="false" descriptionWeight="A polished default split hero for a modern application." mobileStack="true" visualTitle="Split Hero example" visualDescription="A polished default split hero for a modern application." visualItems='[{"id":"split-hero-0-1","key":"split-hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"split-hero-0-2","key":"split-hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' trustItems='[{"id":"split-hero-0-1","key":"split-hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"split-hero-0-2","key":"split-hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--1"><div data-slot="visual">
+<div class="showcase-visual-panel">
+ <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
+ <strong>Composable visual panel</strong>
+ <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
+</div></div></SplitHero>
+ }
+}A ready-to-use section. Copy the complete example below.
page StatsBarExample {
+ view {
+ <StatsBar items='[{"label":"Composite components","value":"18","description":"Reusable public-page building blocks","icon":"icon-[lucide--blocks]","color":"primary"},{"label":"Rendering","value":"SSR","description":"Server-first WRNexusJS rendering","icon":"icon-[lucide--server]","color":"info"},{"label":"Responsive","value":"Yes","description":"Mobile, tablet, and desktop layouts","icon":"icon-[lucide--monitor-smartphone]","color":"success"},{"label":"Theme aware","value":"Yes","description":"Active theme and accent palettes","icon":"icon-[lucide--palette]","color":"warning"}]' columns="4" compact="true" dividers="true" icons="true" size="default" variant="raised" maxWidth="xl" mobileColumns="1" class="showcase-instance showcase-instance--1" />
+ }
+}Semantic primary, secondary, success, warning, danger, and info tokens remain available in every palette.
Primary and secondary tokens communicate brand hierarchy.
Success, warning, danger, and info preserve their semantic meaning in every palette.
Pass color="success" or another semantic color to any component.
Use primary for the main action, danger for destructive actions and success for completion. Always include text or an icon so color is not the only signal.
<Button label="Save" color="primary" />
+<Button label="Delete record" color="danger" />
+<Badge label="Active" color="success" />Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.
<Accordion
- items='[
- {
- "id": "accordion-0-1",
- "key": "accordion-0-1",
- "value": "primary",
- "label": "Primary workflow",
- "title": "Primary workflow",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "A configurable sample message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 16,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- },
- {
- "id": "accordion-0-2",
- "key": "accordion-0-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "Another configurable message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": false,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 32,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- }
- ]'
- defaultOpen='[
- {
- "id": "accordion-0-1",
- "key": "accordion-0-1",
- "value": "primary",
- "label": "Primary workflow",
- "title": "Primary workflow",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "A configurable sample message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 16,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- },
- {
- "id": "accordion-0-2",
- "key": "accordion-0-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "Another configurable message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": false,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 32,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- }
- ]'
-/>page AccordionExample {
+ state items = [
+ {
+ "value": "workspace",
+ "label": "How do I create a workspace?",
+ "content": "Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."
+ },
+ {
+ "value": "billing",
+ "label": "Can I change my plan later?",
+ "content": "Yes. Open Billing to compare plans and choose the one that suits your team."
+ },
+ {
+ "value": "security",
+ "label": "How is my account protected?",
+ "content": "Enable two-step verification and add a recovery method to keep your account secure."
+ }
+]
+ state defaultOpen = [
+ "workspace"
+]
+ view {
+ <Accordion
+ items="{items}"
+ defaultOpen="{defaultOpen}"
+ indicator="chevron"
+ indicatorPosition="end"
+ />
+ }
+}payload.Compare configurations and resize the browser to check responsive behavior.
Balanced spacing, hierarchy, and content for the most common product workflow.
Unframed questions with trailing chevrons and aligned answers.
<Accordion
- items='[
- {
- "id": "accordion-0-1",
- "key": "accordion-0-1",
- "value": "primary",
- "label": "Primary workflow",
- "title": "Primary workflow",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "A configurable sample message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 16,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- },
- {
- "id": "accordion-0-2",
- "key": "accordion-0-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "Another configurable message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": false,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 32,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- }
- ]'
- defaultOpen='[
- {
- "id": "accordion-0-1",
- "key": "accordion-0-1",
- "value": "primary",
- "label": "Primary workflow",
- "title": "Primary workflow",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "A configurable sample message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 16,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- },
- {
- "id": "accordion-0-2",
- "key": "accordion-0-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "Another configurable message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": false,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 32,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- }
- ]'
-/>page AccordionExample {
+ state items = [
+ {
+ "value": "workspace",
+ "label": "How do I create a workspace?",
+ "content": "Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."
+ },
+ {
+ "value": "billing",
+ "label": "Can I change my plan later?",
+ "content": "Yes. Open Billing to compare plans and choose the one that suits your team."
+ },
+ {
+ "value": "security",
+ "label": "How is my account protected?",
+ "content": "Enable two-step verification and add a recovery method to keep your account secure."
+ }
+]
+ state defaultOpen = [
+ "workspace"
+]
+ view {
+ <Accordion
+ items="{items}"
+ defaultOpen="{defaultOpen}"
+ indicator="chevron"
+ indicatorPosition="end"
+ />
+ }
+}A tighter variation for dashboards, side panels, tables, and operational interfaces.
One shared border with leading indicators.
<Accordion
- size="sm"
- variant="secondary"
- items='[
- {
- "id": "accordion-1-1",
- "key": "accordion-1-1",
- "value": "primary",
- "label": "Secondary workflow",
- "title": "Secondary workflow",
- "description": "A compact configuration designed for dense application layouts.",
- "text": "A configurable sample message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--zap]",
- "iconClass": "icon-[lucide--zap]",
- "variant": "secondary",
- "status": "Active",
- "time": "10:15",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 24,
- "percentage": 48,
- "color": "#0284c7",
- "target": "_self",
- "ariaLabel": "Open secondary workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- },
- {
- "id": "accordion-1-2",
- "key": "accordion-1-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A compact configuration designed for dense application layouts.",
- "text": "Another configurable message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--zap]",
- "iconClass": "icon-[lucide--zap]",
- "variant": "secondary",
- "status": "Active",
- "time": "10:15",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": false,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 48,
- "percentage": 48,
- "color": "#0284c7",
- "target": "_self",
- "ariaLabel": "Open secondary workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- }
- ]'
- defaultOpen='[
- {
- "id": "accordion-1-1",
- "key": "accordion-1-1",
- "value": "primary",
- "label": "Secondary workflow",
- "title": "Secondary workflow",
- "description": "A compact configuration designed for dense application layouts.",
- "text": "A configurable sample message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--zap]",
- "iconClass": "icon-[lucide--zap]",
- "variant": "secondary",
- "status": "Active",
- "time": "10:15",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 24,
- "percentage": 48,
- "color": "#0284c7",
- "target": "_self",
- "ariaLabel": "Open secondary workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- },
- {
- "id": "accordion-1-2",
- "key": "accordion-1-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A compact configuration designed for dense application layouts.",
- "text": "Another configurable message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--zap]",
- "iconClass": "icon-[lucide--zap]",
- "variant": "secondary",
- "status": "Active",
- "time": "10:15",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": false,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 48,
- "percentage": 48,
- "color": "#0284c7",
- "target": "_self",
- "ariaLabel": "Open secondary workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- }
- ]'
-/>page AccordionExample {
+ state items = [
+ {
+ "value": "workspace",
+ "label": "How do I create a workspace?",
+ "content": "Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."
+ },
+ {
+ "value": "billing",
+ "label": "Can I change my plan later?",
+ "content": "Yes. Open Billing to compare plans and choose the one that suits your team."
+ },
+ {
+ "value": "security",
+ "label": "How is my account protected?",
+ "content": "Enable two-step verification and add a recovery method to keep your account secure."
+ }
+]
+ state defaultOpen = [
+ "workspace"
+]
+ view {
+ <Accordion
+ size="sm"
+ variant="secondary"
+ items="{items}"
+ defaultOpen="{defaultOpen}"
+ bordered="true"
+ />
+ }
+}A more expressive variation using additional data, stronger emphasis, and optional states.
Individually framed rows; multiple answers can stay open.
<Accordion
- size="lg"
- variant="success"
- items='[
- {
- "id": "accordion-2-1",
- "key": "accordion-2-1",
- "value": "primary",
- "label": "Advanced workflow",
- "title": "Advanced workflow",
- "description": "A richer configuration with more supporting information and actions.",
- "text": "A configurable sample message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "Explore workflow",
- "icon": "icon-[lucide--circle-check]",
- "iconClass": "icon-[lucide--circle-check]",
- "variant": "success",
- "status": "Complete",
- "time": "11:45",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 32,
- "percentage": 91,
- "color": "#059669",
- "target": "_self",
- "ariaLabel": "Open advanced workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Unlimited"
- ]
- },
- {
- "id": "accordion-2-2",
- "key": "accordion-2-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A richer configuration with more supporting information and actions.",
- "text": "Another configurable message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "Explore workflow",
- "icon": "icon-[lucide--circle-check]",
- "iconClass": "icon-[lucide--circle-check]",
- "variant": "success",
- "status": "Complete",
- "time": "11:45",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": true,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 64,
- "percentage": 91,
- "color": "#059669",
- "target": "_self",
- "ariaLabel": "Open advanced workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Unlimited"
- ]
- }
- ]'
- defaultOpen='[
- {
- "id": "accordion-2-1",
- "key": "accordion-2-1",
- "value": "primary",
- "label": "Advanced workflow",
- "title": "Advanced workflow",
- "description": "A richer configuration with more supporting information and actions.",
- "text": "A configurable sample message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "Explore workflow",
- "icon": "icon-[lucide--circle-check]",
- "iconClass": "icon-[lucide--circle-check]",
- "variant": "success",
- "status": "Complete",
- "time": "11:45",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 32,
- "percentage": 91,
- "color": "#059669",
- "target": "_self",
- "ariaLabel": "Open advanced workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Unlimited"
- ]
- },
- {
- "id": "accordion-2-2",
- "key": "accordion-2-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A richer configuration with more supporting information and actions.",
- "text": "Another configurable message.",
- "href": "#accordion-demo",
- "actionHref": "#accordion-demo",
- "actionLabel": "Explore workflow",
- "icon": "icon-[lucide--circle-check]",
- "iconClass": "icon-[lucide--circle-check]",
- "variant": "success",
- "status": "Complete",
- "time": "11:45",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": true,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 64,
- "percentage": 91,
- "color": "#059669",
- "target": "_self",
- "ariaLabel": "Open advanced workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Unlimited"
- ]
- }
- ]'
-/>page AccordionExample {
+ state items = [
+ {
+ "value": "workspace",
+ "label": "How do I create a workspace?",
+ "content": "Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."
+ },
+ {
+ "value": "billing",
+ "label": "Can I change my plan later?",
+ "content": "Yes. Open Billing to compare plans and choose the one that suits your team."
+ },
+ {
+ "value": "security",
+ "label": "How is my account protected?",
+ "content": "Enable two-step verification and add a recovery method to keep your account secure."
+ }
+]
+ state defaultOpen = [
+ "workspace"
+]
+ view {
+ <Accordion
+ size="lg"
+ variant="success"
+ items="{items}"
+ defaultOpen="{defaultOpen}"
+ multiple="true"
+ indicator="chevron"
+ indicatorPosition="end"
+ bordered="true"
+ separated="true"
+ />
+ }
+}All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
size | string | "default" | No |
color | string | "primary" | No |
variant | string | "default" | No |
class | string | "" | No |
id | string | "accordion" | No |
items | unknown[] | [] | No |
defaultOpen | unknown[] | [] | No |
multiple | boolean | false | No |
alwaysOpen | boolean | false | No |
disabled | boolean | false | No |
indicator | string | "plus" | No |
indicatorPosition | string | "start" | No |
showIndicator | boolean | true | No |
bordered | boolean | false | No |
separated | boolean | false | No |
flush | boolean | false | No |
contentItalic | boolean | false | No |
<AdvancedSelect
- label="Default advanced select"
- name="advanced-select-1"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- allowEmpty="false"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Default advanced select"
+ name="advanced-select-1"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ allowEmpty="false"
+ />
+ }
+}<AdvancedSelect
- label="Grouped options"
- name="advanced-select-2"
- value="design"
- values='[]'
- options='[]'
- groups='[
- {
- "label": "Product",
- "options": [
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- }
- ]
- },
- {
- "label": "Business",
- "options": [
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]
- }
- ]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = []
+ state groups = [
+ {
+ "label": "Product",
+ "options": [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ }
+ ]
+ },
+ {
+ "label": "Business",
+ "options": [
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+ ]
+ }
+]
+ view {
+ <AdvancedSelect
+ label="Grouped options"
+ name="advanced-select-2"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ />
+ }
+}<AdvancedSelect
- label="Fixed-position dropdown"
- name="advanced-select-3"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
- fixed="true"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Fixed-position dropdown"
+ name="advanced-select-3"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ fixed="true"
+ />
+ }
+}<AdvancedSelect
- label="Placeholder with icon"
- name="advanced-select-4"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a workspace"
- placeholderIcon="icon-[lucide--building-2]"
- searchable="false"
- allowEmpty="false"
- optionTemplate="icon"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Placeholder with icon"
+ name="advanced-select-4"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a workspace"
+ placeholderIcon="icon-[lucide--building-2]"
+ searchable="false"
+ allowEmpty="false"
+ optionTemplate="icon"
+ />
+ }
+}<AdvancedSelect
- label="Allow empty selection"
- name="advanced-select-5"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Allow empty selection"
+ name="advanced-select-5"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ />
+ }
+}<AdvancedSelect
- label="Multiple selection"
- name="advanced-select-6"
- values='[
- "design",
- "engineering"
- ]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- multiple="true"
- searchable="false"
- allowEmpty="false"
-/>page AdvancedSelectExample {
+ state values = [
+ "design",
+ "engineering"
+]
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Multiple selection"
+ name="advanced-select-6"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ multiple="true"
+ searchable="false"
+ allowEmpty="false"
+ />
+ }
+}<AdvancedSelect
- label="Multiple selection with optgroups"
- name="advanced-select-7"
- values='[
- "design",
- "engineering"
- ]'
- options='[]'
- groups='[
- {
- "label": "Product",
- "options": [
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- }
- ]
- },
- {
- "label": "Business",
- "options": [
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]
- }
- ]'
- placeholder="Choose a team"
- multiple="true"
- searchable="false"
- allowEmpty="false"
-/>page AdvancedSelectExample {
+ state values = [
+ "design",
+ "engineering"
+]
+ state options = []
+ state groups = [
+ {
+ "label": "Product",
+ "options": [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ }
+ ]
+ },
+ {
+ "label": "Business",
+ "options": [
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+ ]
+ }
+]
+ view {
+ <AdvancedSelect
+ label="Multiple selection with optgroups"
+ name="advanced-select-7"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ multiple="true"
+ searchable="false"
+ allowEmpty="false"
+ />
+ }
+}<AdvancedSelect
- label="Multiple selection with option templates"
- name="advanced-select-8"
- values='[
- "design",
- "engineering"
- ]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- multiple="true"
- searchable="false"
- allowEmpty="false"
- optionTemplate="icon"
-/>page AdvancedSelectExample {
+ state values = [
+ "design",
+ "engineering"
+]
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Multiple selection with option templates"
+ name="advanced-select-8"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ multiple="true"
+ searchable="false"
+ allowEmpty="false"
+ optionTemplate="icon"
+ />
+ }
+}<AdvancedSelect
- label="Multiple selection with counter"
- name="advanced-select-9"
- values='[
- "design",
- "engineering"
- ]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- multiple="true"
- searchable="false"
- allowEmpty="false"
- showCounter="true"
-/>page AdvancedSelectExample {
+ state values = [
+ "design",
+ "engineering"
+]
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Multiple selection with counter"
+ name="advanced-select-9"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ multiple="true"
+ searchable="false"
+ allowEmpty="false"
+ showCounter="true"
+ />
+ }
+}<AdvancedSelect
- label="Multiple selection with conditional counter"
- name="advanced-select-10"
- values='[
- "design",
- "engineering"
- ]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- multiple="true"
- searchable="false"
- allowEmpty="false"
- maxSelections="3"
- showCounter="true"
-/>page AdvancedSelectExample {
+ state values = [
+ "design",
+ "engineering"
+]
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Multiple selection with conditional counter"
+ name="advanced-select-10"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ multiple="true"
+ searchable="false"
+ allowEmpty="false"
+ maxSelections="3"
+ showCounter="true"
+ />
+ }
+}<AdvancedSelect
- label="Counter with option templates"
- name="advanced-select-11"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
- showCounter="true"
- optionTemplate="icon"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Counter with option templates"
+ name="advanced-select-11"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ showCounter="true"
+ optionTemplate="icon"
+ />
+ }
+}<AdvancedSelect
- label="Searchable dropdown"
- name="advanced-select-12"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- allowEmpty="false"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Searchable dropdown"
+ name="advanced-select-12"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ allowEmpty="false"
+ />
+ }
+}<AdvancedSelect
- label="Minimum search length"
- name="advanced-select-13"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- allowEmpty="false"
- minSearchLength="3"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Minimum search length"
+ name="advanced-select-13"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ allowEmpty="false"
+ minSearchLength="3"
+ />
+ }
+}<AdvancedSelect
- label="Search result limit"
- name="advanced-select-14"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- allowEmpty="false"
- searchResultLimit="3"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Search result limit"
+ name="advanced-select-14"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ allowEmpty="false"
+ searchResultLimit="3"
+ />
+ }
+}<AdvancedSelect
- label="Scroll to selected option"
- name="advanced-select-15"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Scroll to selected option"
+ name="advanced-select-15"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ />
+ }
+}<AdvancedSelect
- label="Search match mode"
- name="advanced-select-16"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- allowEmpty="false"
- searchMode="startsWith"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Search match mode"
+ name="advanced-select-16"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ allowEmpty="false"
+ searchMode="startsWith"
+ />
+ }
+}<AdvancedSelect
- label="Search labels and descriptions"
- name="advanced-select-17"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- allowEmpty="false"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Search labels and descriptions"
+ name="advanced-select-17"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ allowEmpty="false"
+ />
+ }
+}<AdvancedSelect
- label="Tag-style selection"
- name="advanced-select-18"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
- tags="true"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Tag-style selection"
+ name="advanced-select-18"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ tags="true"
+ />
+ }
+}<AdvancedSelect
- label="Disabled tag selection"
- name="advanced-select-19"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
- tags="true"
- disabled="true"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Disabled tag selection"
+ name="advanced-select-19"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ tags="true"
+ disabled="true"
+ />
+ }
+}<AdvancedSelect
- label="Option template with icons"
- name="advanced-select-20"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
- optionTemplate="icon"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Option template with icons"
+ name="advanced-select-20"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ optionTemplate="icon"
+ />
+ }
+}<AdvancedSelect
- label="Option template with avatars"
- name="advanced-select-21"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
- optionTemplate="avatar"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Option template with avatars"
+ name="advanced-select-21"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ optionTemplate="avatar"
+ />
+ }
+}<AdvancedSelect
- label="Option template with color indicators"
- name="advanced-select-22"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
- optionTemplate="color"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Option template with color indicators"
+ name="advanced-select-22"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ optionTemplate="color"
+ />
+ }
+}<AdvancedSelect
- size="lg"
- label="Advanced select sizes"
- name="advanced-select-23"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ size="lg"
+ label="Advanced select sizes"
+ name="advanced-select-23"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ />
+ }
+}<AdvancedSelect
- label="Disabled advanced select"
- name="advanced-select-24"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
- disabled="true"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Disabled advanced select"
+ name="advanced-select-24"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ disabled="true"
+ />
+ }
+}<AdvancedSelect
- label="Inside a modal"
- name="advanced-select-25"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Inside a modal"
+ name="advanced-select-25"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ />
+ }
+}<AdvancedSelect
- label="Validation states"
- name="advanced-select-26"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
- required="true"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Validation states"
+ name="advanced-select-26"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ required="true"
+ />
+ }
+}<AdvancedSelect
- label="Dynamic validation styling"
- name="advanced-select-27"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
- required="true"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Dynamic validation styling"
+ name="advanced-select-27"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ required="true"
+ />
+ }
+}<AdvancedSelect
- label="Add or remove options"
- name="advanced-select-28"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Add or remove options"
+ name="advanced-select-28"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ />
+ }
+}<AdvancedSelect
- label="Add or remove options in multiple mode"
- name="advanced-select-29"
- values='[
- "design",
- "engineering"
- ]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- multiple="true"
- searchable="false"
- allowEmpty="false"
-/>page AdvancedSelectExample {
+ state values = [
+ "design",
+ "engineering"
+]
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Add or remove options in multiple mode"
+ name="advanced-select-29"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ multiple="true"
+ searchable="false"
+ allowEmpty="false"
+ />
+ }
+}<AdvancedSelect
- label="Set a single value programmatically"
- name="advanced-select-30"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Set a single value programmatically"
+ name="advanced-select-30"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ />
+ }
+}<AdvancedSelect
- label="Set multiple values programmatically"
- name="advanced-select-31"
- values='[
- "design",
- "engineering"
- ]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- multiple="true"
- searchable="false"
- allowEmpty="false"
-/>page AdvancedSelectExample {
+ state values = [
+ "design",
+ "engineering"
+]
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Set multiple values programmatically"
+ name="advanced-select-31"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ multiple="true"
+ searchable="false"
+ allowEmpty="false"
+ />
+ }
+}<AdvancedSelect
- label="Remote data source"
- name="advanced-select-32"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- allowEmpty="false"
- minSearchLength="2"
- remote="true"
- remoteUrl="/api/teams"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Remote data source"
+ name="advanced-select-32"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ allowEmpty="false"
+ minSearchLength="2"
+ remote="true"
+ remoteUrl="/api/teams"
+ />
+ }
+}<AdvancedSelect
- label="Remote data source (multiple)"
- name="advanced-select-33"
- values='[
- "design",
- "engineering"
- ]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- multiple="true"
- allowEmpty="false"
- minSearchLength="2"
- remote="true"
- remoteUrl="/api/teams"
-/>page AdvancedSelectExample {
+ state values = [
+ "design",
+ "engineering"
+]
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Remote data source (multiple)"
+ name="advanced-select-33"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ multiple="true"
+ allowEmpty="false"
+ minSearchLength="2"
+ remote="true"
+ remoteUrl="/api/teams"
+ />
+ }
+}<AdvancedSelect
- label="Remote data tags"
- name="advanced-select-34"
- values='[
- "design",
- "engineering"
- ]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- multiple="true"
- allowEmpty="false"
- tags="true"
- minSearchLength="2"
- remote="true"
- remoteUrl="/api/teams"
-/>page AdvancedSelectExample {
+ state values = [
+ "design",
+ "engineering"
+]
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Remote data tags"
+ name="advanced-select-34"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ multiple="true"
+ allowEmpty="false"
+ tags="true"
+ minSearchLength="2"
+ remote="true"
+ remoteUrl="/api/teams"
+ />
+ }
+}<AdvancedSelect
- label="Option templates with remote data"
- name="advanced-select-35"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- allowEmpty="false"
- minSearchLength="2"
- optionTemplate="icon"
- remote="true"
- remoteUrl="/api/teams"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Option templates with remote data"
+ name="advanced-select-35"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ allowEmpty="false"
+ minSearchLength="2"
+ optionTemplate="icon"
+ remote="true"
+ remoteUrl="/api/teams"
+ />
+ }
+}<AdvancedSelect
- label="Conditional counter with remote data"
- name="advanced-select-36"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- allowEmpty="false"
- minSearchLength="2"
- maxSelections="3"
- showCounter="true"
- remote="true"
- remoteUrl="/api/teams"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Conditional counter with remote data"
+ name="advanced-select-36"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ allowEmpty="false"
+ minSearchLength="2"
+ maxSelections="3"
+ showCounter="true"
+ remote="true"
+ remoteUrl="/api/teams"
+ />
+ }
+}<AdvancedSelect
- label="Avatar template with remote data"
- name="advanced-select-37"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- allowEmpty="false"
- minSearchLength="2"
- optionTemplate="avatar"
- remote="true"
- remoteUrl="/api/teams"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Avatar template with remote data"
+ name="advanced-select-37"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ allowEmpty="false"
+ minSearchLength="2"
+ optionTemplate="avatar"
+ remote="true"
+ remoteUrl="/api/teams"
+ />
+ }
+}<AdvancedSelect
- label="Preselected values"
- name="advanced-select-38"
- value="engineering"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Preselected values"
+ name="advanced-select-38"
+ value="engineering"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ />
+ }
+}<AdvancedSelect
- label="Infinite scroll"
- name="advanced-select-39"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- allowEmpty="false"
- remote="true"
- remoteUrl="/api/teams"
- infinite="true"
- hasMore="true"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Infinite scroll"
+ name="advanced-select-39"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ allowEmpty="false"
+ remote="true"
+ remoteUrl="/api/teams"
+ infinite="true"
+ hasMore="true"
+ />
+ }
+}<AdvancedSelect
- label="Inside overflow-hidden containers"
- name="advanced-select-40"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
- fixed="true"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Inside overflow-hidden containers"
+ name="advanced-select-40"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ fixed="true"
+ />
+ }
+}<AdvancedSelect
- label="Destroy and reinitialize"
- name="advanced-select-41"
- value="design"
- values='[]'
- options='[
- {
- "value": "design",
- "label": "Design",
- "description": "Product and visual design",
- "icon": "icon-[lucide--palette]",
- "color": "#8b5cf6",
- "avatar": "/showcase-images/avatar-design.svg"
- },
- {
- "value": "engineering",
- "label": "Engineering",
- "description": "Platform and application engineering",
- "icon": "icon-[lucide--code-2]",
- "color": "#0ea5e9",
- "avatar": "/showcase-images/avatar-engineering.svg"
- },
- {
- "value": "growth",
- "label": "Growth",
- "description": "Marketing and customer growth",
- "icon": "icon-[lucide--trending-up]",
- "color": "#10b981",
- "avatar": "/showcase-images/avatar-growth.svg"
- },
- {
- "value": "support",
- "label": "Support",
- "description": "Customer operations",
- "disabled": false
- }
- ]'
- groups='[]'
- placeholder="Choose a team"
- searchable="false"
- allowEmpty="false"
-/>page AdvancedSelectExample {
+ state values = []
+ state options = [
+ {
+ "value": "design",
+ "label": "Design",
+ "description": "Product and visual design",
+ "icon": "icon-[lucide--palette]",
+ "color": "#8b5cf6",
+ "avatar": "/showcase-images/avatar-design.svg"
+ },
+ {
+ "value": "engineering",
+ "label": "Engineering",
+ "description": "Platform and application engineering",
+ "icon": "icon-[lucide--code-2]",
+ "color": "#0ea5e9",
+ "avatar": "/showcase-images/avatar-engineering.svg"
+ },
+ {
+ "value": "growth",
+ "label": "Growth",
+ "description": "Marketing and customer growth",
+ "icon": "icon-[lucide--trending-up]",
+ "color": "#10b981",
+ "avatar": "/showcase-images/avatar-growth.svg"
+ },
+ {
+ "value": "support",
+ "label": "Support",
+ "description": "Customer operations",
+ "disabled": false
+ }
+]
+ state groups = []
+ view {
+ <AdvancedSelect
+ label="Destroy and reinitialize"
+ name="advanced-select-41"
+ value="design"
+ values="{values}"
+ options="{options}"
+ groups="{groups}"
+ placeholder="Choose a team"
+ searchable="false"
+ allowEmpty="false"
+ />
+ }
+}<Alert
- title="Alert example"
- description="A polished default alert for a modern application."
- items='[
- {
- "id": "alert-0-1",
- "key": "alert-0-1",
- "value": "primary",
- "label": "Primary workflow",
- "title": "Primary workflow",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "A configurable sample message.",
- "href": "#alert-demo",
- "actionHref": "#alert-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 16,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- },
- {
- "id": "alert-0-2",
- "key": "alert-0-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "Another configurable message.",
- "href": "#alert-demo",
- "actionHref": "#alert-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": false,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 32,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- }
- ]'
- actions='[
- {
- "id": "alert-0-1",
- "key": "alert-0-1",
- "value": "primary",
- "label": "Primary workflow",
- "title": "Primary workflow",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "A configurable sample message.",
- "href": "#alert-demo",
- "actionHref": "#alert-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 16,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- },
- {
- "id": "alert-0-2",
- "key": "alert-0-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "Another configurable message.",
- "href": "#alert-demo",
- "actionHref": "#alert-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": false,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 32,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- }
- ]'
- showIcon="true"
- dismissible="true"
- dismissLabel="Alert"
- linkLabel="Alert"
- linkHref="#alert-demo"
- actionLabel="Alert"
- actionHref="#alert-demo"
-/>page AlertExample {
+ state items = []
+ state actions = []
+ view {
+ <Alert
+ color="success"
+ shadow="none"
+ title="Changes saved"
+ description="Your workspace settings are up to date."
+ items="{items}"
+ actions="{actions}"
+ showIcon="true"
+ icon="icon-[lucide--circle-check]"
+ dismissible="true"
+ />
+ }
+}payload.Compare configurations and resize the browser to check responsive behavior.
Balanced spacing, hierarchy, and content for the most common product workflow.
A concise confirmation that can be dismissed.
<Alert
- title="Alert example"
- description="A polished default alert for a modern application."
- items='[
- {
- "id": "alert-0-1",
- "key": "alert-0-1",
- "value": "primary",
- "label": "Primary workflow",
- "title": "Primary workflow",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "A configurable sample message.",
- "href": "#alert-demo",
- "actionHref": "#alert-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 16,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- },
- {
- "id": "alert-0-2",
- "key": "alert-0-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "Another configurable message.",
- "href": "#alert-demo",
- "actionHref": "#alert-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": false,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 32,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- }
- ]'
- actions='[
- {
- "id": "alert-0-1",
- "key": "alert-0-1",
- "value": "primary",
- "label": "Primary workflow",
- "title": "Primary workflow",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "A configurable sample message.",
- "href": "#alert-demo",
- "actionHref": "#alert-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 16,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- },
- {
- "id": "alert-0-2",
- "key": "alert-0-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A clean default configuration for everyday product interfaces.",
- "text": "Another configurable message.",
- "href": "#alert-demo",
- "actionHref": "#alert-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--sparkles]",
- "iconClass": "icon-[lucide--sparkles]",
- "variant": "primary",
- "status": "Active",
- "time": "09:30",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": false,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 32,
- "percentage": 72,
- "color": "#7c3aed",
- "target": "_self",
- "ariaLabel": "Open primary workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- }
- ]'
- showIcon="true"
- dismissible="true"
- dismissLabel="Alert"
- linkLabel="Alert"
- linkHref="#alert-demo"
- actionLabel="Alert"
- actionHref="#alert-demo"
-/>page AlertExample {
+ state items = []
+ state actions = []
+ view {
+ <Alert
+ color="success"
+ shadow="none"
+ title="Changes saved"
+ description="Your workspace settings are up to date."
+ items="{items}"
+ actions="{actions}"
+ showIcon="true"
+ icon="icon-[lucide--circle-check]"
+ dismissible="true"
+ />
+ }
+}A tighter variation for dashboards, side panels, tables, and operational interfaces.
One useful message without unnecessary actions.
<Alert
- size="sm"
- variant="secondary"
- title="Compact Alert"
- description="A compact configuration for dashboards and dense product surfaces."
- items='[
- {
- "id": "alert-1-1",
- "key": "alert-1-1",
- "value": "primary",
- "label": "Secondary workflow",
- "title": "Secondary workflow",
- "description": "A compact configuration designed for dense application layouts.",
- "text": "A configurable sample message.",
- "href": "#alert-demo",
- "actionHref": "#alert-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--zap]",
- "iconClass": "icon-[lucide--zap]",
- "variant": "secondary",
- "status": "Active",
- "time": "10:15",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 24,
- "percentage": 48,
- "color": "#0284c7",
- "target": "_self",
- "ariaLabel": "Open secondary workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- },
- {
- "id": "alert-1-2",
- "key": "alert-1-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A compact configuration designed for dense application layouts.",
- "text": "Another configurable message.",
- "href": "#alert-demo",
- "actionHref": "#alert-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--zap]",
- "iconClass": "icon-[lucide--zap]",
- "variant": "secondary",
- "status": "Active",
- "time": "10:15",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": false,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 48,
- "percentage": 48,
- "color": "#0284c7",
- "target": "_self",
- "ariaLabel": "Open secondary workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- }
- ]'
- actions='[
- {
- "id": "alert-1-1",
- "key": "alert-1-1",
- "value": "primary",
- "label": "Secondary workflow",
- "title": "Secondary workflow",
- "description": "A compact configuration designed for dense application layouts.",
- "text": "A configurable sample message.",
- "href": "#alert-demo",
- "actionHref": "#alert-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--zap]",
- "iconClass": "icon-[lucide--zap]",
- "variant": "secondary",
- "status": "Active",
- "time": "10:15",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 24,
- "percentage": 48,
- "color": "#0284c7",
- "target": "_self",
- "ariaLabel": "Open secondary workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- },
- {
- "id": "alert-1-2",
- "key": "alert-1-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A compact configuration designed for dense application layouts.",
- "text": "Another configurable message.",
- "href": "#alert-demo",
- "actionHref": "#alert-demo",
- "actionLabel": "View details",
- "icon": "icon-[lucide--zap]",
- "iconClass": "icon-[lucide--zap]",
- "variant": "secondary",
- "status": "Active",
- "time": "10:15",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": false,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 48,
- "percentage": 48,
- "color": "#0284c7",
- "target": "_self",
- "ariaLabel": "Open secondary workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Standard"
- ]
- }
- ]'
- showIcon="true"
- icon="icon-[lucide--arrow-right]"
- dismissible="true"
- dismissLabel="Compact example"
- linkLabel="Compact example"
- linkHref="#alert-demo"
- actionLabel="Compact example"
- actionHref="#alert-demo"
- compact="true"
-/>page AlertExample {
+ state items = []
+ state actions = []
+ view {
+ <Alert
+ shadow="none"
+ title="Scheduled maintenance"
+ description="The dashboard will be unavailable Sunday, 02:00–02:30 UTC."
+ items="{items}"
+ actions="{actions}"
+ showIcon="true"
+ icon="icon-[lucide--info]"
+ dismissible="true"
+ />
+ }
+}A more expressive variation using additional data, stronger emphasis, and optional states.
A warning with one relevant next step.
<Alert
- size="lg"
- variant="success"
- title="Advanced Alert"
- description="A richer configuration demonstrating additional content and hierarchy."
- items='[
- {
- "id": "alert-2-1",
- "key": "alert-2-1",
- "value": "primary",
- "label": "Advanced workflow",
- "title": "Advanced workflow",
- "description": "A richer configuration with more supporting information and actions.",
- "text": "A configurable sample message.",
- "href": "#alert-demo",
- "actionHref": "#alert-demo",
- "actionLabel": "Explore workflow",
- "icon": "icon-[lucide--circle-check]",
- "iconClass": "icon-[lucide--circle-check]",
- "variant": "success",
- "status": "Complete",
- "time": "11:45",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 32,
- "percentage": 91,
- "color": "#059669",
- "target": "_self",
- "ariaLabel": "Open advanced workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Unlimited"
- ]
- },
- {
- "id": "alert-2-2",
- "key": "alert-2-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A richer configuration with more supporting information and actions.",
- "text": "Another configurable message.",
- "href": "#alert-demo",
- "actionHref": "#alert-demo",
- "actionLabel": "Explore workflow",
- "icon": "icon-[lucide--circle-check]",
- "iconClass": "icon-[lucide--circle-check]",
- "variant": "success",
- "status": "Complete",
- "time": "11:45",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": true,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 64,
- "percentage": 91,
- "color": "#059669",
- "target": "_self",
- "ariaLabel": "Open advanced workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Unlimited"
- ]
- }
- ]'
- actions='[
- {
- "id": "alert-2-1",
- "key": "alert-2-1",
- "value": "primary",
- "label": "Advanced workflow",
- "title": "Advanced workflow",
- "description": "A richer configuration with more supporting information and actions.",
- "text": "A configurable sample message.",
- "href": "#alert-demo",
- "actionHref": "#alert-demo",
- "actionLabel": "Explore workflow",
- "icon": "icon-[lucide--circle-check]",
- "iconClass": "icon-[lucide--circle-check]",
- "variant": "success",
- "status": "Complete",
- "time": "11:45",
- "current": true,
- "selected": true,
- "checked": true,
- "disabled": false,
- "outgoing": false,
- "open": true,
- "number": 1,
- "count": 32,
- "percentage": 91,
- "color": "#059669",
- "target": "_self",
- "ariaLabel": "Open advanced workflow 1",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Unlimited"
- ]
- },
- {
- "id": "alert-2-2",
- "key": "alert-2-2",
- "value": "secondary",
- "label": "Additional option",
- "title": "Supporting example",
- "description": "A richer configuration with more supporting information and actions.",
- "text": "Another configurable message.",
- "href": "#alert-demo",
- "actionHref": "#alert-demo",
- "actionLabel": "Explore workflow",
- "icon": "icon-[lucide--circle-check]",
- "iconClass": "icon-[lucide--circle-check]",
- "variant": "success",
- "status": "Complete",
- "time": "11:45",
- "current": false,
- "selected": false,
- "checked": false,
- "disabled": true,
- "outgoing": true,
- "open": true,
- "number": 2,
- "count": 64,
- "percentage": 91,
- "color": "#059669",
- "target": "_self",
- "ariaLabel": "Open advanced workflow 2",
- "items": [
- {
- "label": "Nested option A",
- "value": "nested-a"
- },
- {
- "label": "Nested option B",
- "value": "nested-b"
- }
- ],
- "links": [
- {
- "label": "Documentation",
- "href": "#documentation"
- },
- {
- "label": "API reference",
- "href": "#api-reference"
- }
- ],
- "values": [
- "Included",
- "Unlimited"
- ]
- }
- ]'
- showIcon="true"
- icon="icon-[lucide--trash-2]"
- dismissible="true"
- dismissLabel="Advanced example"
- linkLabel="Advanced example"
- linkHref="#alert-demo"
- actionLabel="Advanced example"
- actionHref="#alert-demo"
-/>page AlertExample {
+ state items = []
+ state actions = []
+ view {
+ <Alert
+ color="warning"
+ shadow="none"
+ title="Payment needs attention"
+ description="Update your payment method to keep your subscription active."
+ items="{items}"
+ actions="{actions}"
+ showIcon="true"
+ icon="icon-[lucide--triangle-alert]"
+ dismissible="true"
+ actionLabel="Update payment"
+ actionHref="#payment"
+ />
+ }
+}All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
size | string | "default" | No |
color | string | "info" | No |
variant | string | "soft" | No |
class | string | "" | No |
radius | string | "md" | No |
shadow | string | "sm" | No |
title | string | "Alert" | No |
description | string | "" | No |
items | unknown[] | [] | No |
actions | unknown[] | [] | No |
showIcon | boolean | false | No |
icon | string | "" | No |
dismissible | boolean | false | No |
dismissLabel | string | "Dismiss alert" | No |
role | string | "alert" | No |
live | string | "polite" | No |
linkLabel | string | "" | No |
linkHref | string | "" | No |
actionLabel | string | "" | No |
actionHref | string | "" | No |
compact | boolean | false | No |