@lowdefy/blocks-antd 5.6.0 → 6.0.0

package/dist/blocks/MultipleSelector/gallery.yaml

@@ -0,0 +1,1245 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+- title: Basic
+  blocks:
+    - id: basic_multi
+      type: MultipleSelector
+      properties:
+        title: Select Fruits
+        options:
+          - label: Apple
+            value: apple
+          - label: Banana
+            value: banana
+          - label: Cherry
+            value: cherry
+          - label: Dragonfruit
+            value: dragonfruit
+          - label: Elderberry
+            value: elderberry
+          - label: Fig
+            value: fig
+    - id: basic_placeholder
+      type: MultipleSelector
+      properties:
+        title: Select Languages
+        placeholder: Choose languages...
+        options:
+          - label: English
+            value: en
+          - label: Spanish
+            value: es
+          - label: French
+            value: fr
+          - label: German
+            value: de
+          - label: Japanese
+            value: ja
+          - label: Mandarin
+            value: zh
+
+- title: Primitive Options
+  blocks:
+    - id: prim_strings
+      type: MultipleSelector
+      properties:
+        title: String Options
+        options:
+          - Red
+          - Green
+          - Blue
+          - Yellow
+          - Purple
+          - Orange
+    - id: prim_numbers
+      type: MultipleSelector
+      properties:
+        title: Number Options
+        options:
+          - 10
+          - 20
+          - 30
+          - 40
+          - 50
+
+- title: Sizes
+  blocks:
+    - id: size_small
+      type: MultipleSelector
+      properties:
+        title: Small
+        size: small
+        options:
+          - Red
+          - Green
+          - Blue
+          - Yellow
+    - id: size_default
+      type: MultipleSelector
+      properties:
+        title: Default
+        options:
+          - Red
+          - Green
+          - Blue
+          - Yellow
+    - id: size_large
+      type: MultipleSelector
+      properties:
+        title: Large
+        size: large
+        options:
+          - Red
+          - Green
+          - Blue
+          - Yellow
+
+- title: Toggle Properties
+  blocks:
+    - id: toggle_allow_clear
+      type: MultipleSelector
+      properties:
+        title: Allow Clear (default)
+        allowClear: true
+        options:
+          - label: Option A
+            value: a
+          - label: Option B
+            value: b
+          - label: Option C
+            value: c
+    - id: toggle_no_arrow
+      type: MultipleSelector
+      properties:
+        title: No Arrow
+        showArrow: false
+        options:
+          - label: Cat
+            value: cat
+          - label: Dog
+            value: dog
+          - label: Bird
+            value: bird
+    - id: toggle_auto_focus
+      type: MultipleSelector
+      properties:
+        title: Auto Focus
+        autoFocus: true
+        options:
+          - label: React
+            value: react
+          - label: Vue
+            value: vue
+          - label: Angular
+            value: angular
+
+- title: Bordered
+  blocks:
+    - id: bordered_true
+      type: MultipleSelector
+      properties:
+        title: Bordered (default)
+        bordered: true
+        options:
+          - label: React
+            value: react
+          - label: Vue
+            value: vue
+          - label: Angular
+            value: angular
+    - id: bordered_false
+      type: MultipleSelector
+      properties:
+        title: Borderless
+        bordered: false
+        options:
+          - label: React
+            value: react
+          - label: Vue
+            value: vue
+          - label: Angular
+            value: angular
+
+- title: Max Tag Count
+  blocks:
+    - id: max_tags_3
+      type: MultipleSelector
+      properties:
+        title: Max 3 Tags Shown
+        maxTagCount: 3
+        options:
+          - label: React
+            value: react
+          - label: Vue
+            value: vue
+          - label: Angular
+            value: angular
+          - label: Svelte
+            value: svelte
+          - label: Ember
+            value: ember
+          - label: Solid
+            value: solid
+          - label: Preact
+            value: preact
+    - id: max_tags_2
+      type: MultipleSelector
+      properties:
+        title: Max 2 Tags Shown
+        maxTagCount: 2
+        options:
+          - label: React
+            value: react
+          - label: Vue
+            value: vue
+          - label: Angular
+            value: angular
+          - label: Svelte
+            value: svelte
+          - label: Ember
+            value: ember
+    - id: max_tags_1
+      type: MultipleSelector
+      properties:
+        title: Max 1 Tag Shown
+        maxTagCount: 1
+        options:
+          - label: North America
+            value: na
+          - label: South America
+            value: sa
+          - label: Europe
+            value: eu
+          - label: Asia
+            value: asia
+          - label: Africa
+            value: af
+
+- title: Custom Placeholder & Not Found
+  blocks:
+    - id: custom_placeholder
+      type: MultipleSelector
+      properties:
+        title: Custom Placeholder
+        placeholder: Pick your favorite colors...
+        options:
+          - label: Crimson
+            value: crimson
+          - label: Teal
+            value: teal
+          - label: Indigo
+            value: indigo
+    - id: custom_not_found
+      type: MultipleSelector
+      properties:
+        title: Custom Not Found Content
+        notFoundContent: No matching items available
+        options: []
+    - id: custom_loading_placeholder
+      type: MultipleSelector
+      properties:
+        title: Custom Loading Placeholder
+        loadingPlaceholder: Fetching results...
+        options:
+          - label: Item A
+            value: a
+          - label: Item B
+            value: b
+
+- title: Auto Clear Search Value
+  blocks:
+    - id: auto_clear_true
+      type: MultipleSelector
+      properties:
+        title: Auto Clear Search (default)
+        autoClearSearchValue: true
+        options:
+          - label: JavaScript
+            value: js
+          - label: TypeScript
+            value: ts
+          - label: Python
+            value: py
+          - label: Ruby
+            value: rb
+          - label: Go
+            value: go
+    - id: auto_clear_false
+      type: MultipleSelector
+      properties:
+        title: Keep Search on Select
+        autoClearSearchValue: false
+        options:
+          - label: JavaScript
+            value: js
+          - label: TypeScript
+            value: ts
+          - label: Python
+            value: py
+          - label: Ruby
+            value: rb
+          - label: Go
+            value: go
+
+- title: Custom Icons
+  blocks:
+    - id: custom_suffix_icon
+      type: MultipleSelector
+      properties:
+        title: Custom Suffix Icon
+        suffixIcon: AiOutlineSearch
+        options:
+          - label: Tokyo
+            value: tokyo
+          - label: Paris
+            value: paris
+          - label: London
+            value: london
+          - label: New York
+            value: new_york
+    - id: custom_suffix_icon_object
+      type: MultipleSelector
+      properties:
+        title: Colored Suffix Icon
+        suffixIcon:
+          name: AiOutlineGlobal
+          color: '#1677ff'
+        options:
+          - label: Tokyo
+            value: tokyo
+          - label: Paris
+            value: paris
+          - label: London
+            value: london
+    - id: custom_clear_icon
+      type: MultipleSelector
+      properties:
+        title: Custom Clear Icon
+        clearIcon: AiOutlineDelete
+        options:
+          - label: File A
+            value: a
+          - label: File B
+            value: b
+          - label: File C
+            value: c
+    - id: custom_selected_icon
+      type: MultipleSelector
+      properties:
+        title: Custom Selected Icon
+        selectedIcon: AiOutlineStar
+        options:
+          - label: Gold Plan
+            value: gold
+          - label: Silver Plan
+            value: silver
+          - label: Bronze Plan
+            value: bronze
+
+- title: Render Tags
+  blocks:
+    - id: tags_preset_colors
+      type: MultipleSelector
+      properties:
+        title: Preset Tag Colors
+        renderTags: true
+        options:
+          - label: Success
+            value: success
+            tag:
+              color: success
+          - label: Processing
+            value: processing
+            tag:
+              color: processing
+          - label: Error
+            value: error
+            tag:
+              color: error
+          - label: Warning
+            value: warning
+            tag:
+              color: warning
+          - label: Default
+            value: default
+            tag:
+              color: default
+    - id: tags_named_colors
+      type: MultipleSelector
+      properties:
+        title: Named Tag Colors
+        renderTags: true
+        options:
+          - label: Blue
+            value: blue
+            tag:
+              color: blue
+          - label: Cyan
+            value: cyan
+            tag:
+              color: cyan
+          - label: Geekblue
+            value: geekblue
+            tag:
+              color: geekblue
+          - label: Gold
+            value: gold
+            tag:
+              color: gold
+          - label: Green
+            value: green
+            tag:
+              color: green
+          - label: Lime
+            value: lime
+            tag:
+              color: lime
+          - label: Magenta
+            value: magenta
+            tag:
+              color: magenta
+          - label: Orange
+            value: orange
+            tag:
+              color: orange
+          - label: Purple
+            value: purple
+            tag:
+              color: purple
+          - label: Red
+            value: red
+            tag:
+              color: red
+          - label: Volcano
+            value: volcano
+            tag:
+              color: volcano
+    - id: tags_hex_colors
+      type: MultipleSelector
+      properties:
+        title: Custom Hex Tag Colors
+        renderTags: true
+        options:
+          - label: Coral
+            value: coral
+            tag:
+              color: '#ff6b6b'
+          - label: Teal
+            value: teal
+            tag:
+              color: '#20c997'
+          - label: Indigo
+            value: indigo
+            tag:
+              color: '#4c6ef5'
+          - label: Amber
+            value: amber
+            tag:
+              color: '#fab005'
+          - label: Pink
+            value: pink
+            tag:
+              color: '#e64980'
+    - id: tags_custom_titles
+      type: MultipleSelector
+      properties:
+        title: Tags with Custom Titles
+        renderTags: true
+        options:
+          - label: Frontend Developer
+            value: frontend
+            tag:
+              title: FE
+              color: blue
+          - label: Backend Developer
+            value: backend
+            tag:
+              title: BE
+              color: green
+          - label: DevOps Engineer
+            value: devops
+            tag:
+              title: Ops
+              color: volcano
+          - label: QA Engineer
+            value: qa
+            tag:
+              title: QA
+              color: purple
+          - label: Designer
+            value: designer
+            tag:
+              title: UX
+              color: magenta
+    - id: render_tags_false
+      type: MultipleSelector
+      properties:
+        title: Tags Rendering Off (default)
+        renderTags: false
+        options:
+          - label: Alpha
+            value: alpha
+            tag:
+              color: blue
+          - label: Beta
+            value: beta
+            tag:
+              color: green
+          - label: Gamma
+            value: gamma
+            tag:
+              color: red
+
+- title: Render Tags with Icons
+  blocks:
+    - id: tags_with_icons
+      type: MultipleSelector
+      properties:
+        title: Tags with Icons
+        renderTags: true
+        options:
+          - label: Approved
+            value: approved
+            tag:
+              icon: AiOutlineCheck
+              color: success
+          - label: Pending
+            value: pending
+            tag:
+              icon: AiOutlineClockCircle
+              color: processing
+          - label: Rejected
+            value: rejected
+            tag:
+              icon: AiOutlineClose
+              color: error
+          - label: Draft
+            value: draft
+            tag:
+              icon: AiOutlineEdit
+              color: default
+    - id: tags_icons_colors_titles
+      type: MultipleSelector
+      properties:
+        title: Tags with Icons, Colors, and Titles
+        renderTags: true
+        options:
+          - label: High Priority
+            value: high
+            tag:
+              title: High
+              icon: AiOutlineArrowUp
+              color: red
+          - label: Medium Priority
+            value: medium
+            tag:
+              title: Med
+              icon: AiOutlineMinus
+              color: orange
+          - label: Low Priority
+            value: low
+            tag:
+              title: Low
+              icon: AiOutlineArrowDown
+              color: green
+
+- title: Disabled State
+  blocks:
+    - id: disabled_multi
+      type: MultipleSelector
+      properties:
+        title: Disabled Selector
+        disabled: true
+        options:
+          - label: Option A
+            value: a
+          - label: Option B
+            value: b
+          - label: Option C
+            value: c
+    - id: disabled_options
+      type: MultipleSelector
+      properties:
+        title: Disabled Options
+        options:
+          - label: Available
+            value: available
+          - label: Sold Out
+            value: sold_out
+            disabled: true
+          - label: In Stock
+            value: in_stock
+          - label: Backordered
+            value: backordered
+            disabled: true
+          - label: Pre-order
+            value: preorder
+
+- title: Options
+  blocks:
+    - id: options_filter_string
+      type: MultipleSelector
+      properties:
+        title: Search by Filter String
+        placeholder: Try typing "js" or "python"...
+        options:
+          - label: React
+            value: react
+            filterString: javascript js react frontend
+          - label: Vue
+            value: vue
+            filterString: javascript js vue frontend
+          - label: Django
+            value: django
+            filterString: python django backend
+          - label: Flask
+            value: flask
+            filterString: python flask backend
+          - label: Express
+            value: express
+            filterString: javascript js node express backend
+    - id: options_styled
+      type: MultipleSelector
+      properties:
+        title: Styled Options
+        options:
+          - label: Important
+            value: important
+            style:
+              fontWeight: bold
+              color: '#ff4d4f'
+          - label: Normal
+            value: normal
+          - label: Dimmed
+            value: dimmed
+            style:
+              color: '#8c8c8c'
+              fontStyle: italic
+          - label: Highlighted
+            value: highlighted
+    - id: options_allow_clear_false
+      type: MultipleSelector
+      properties:
+        title: No Clear Button
+        allowClear: false
+        options:
+          - label: Option A
+            value: a
+          - label: Option B
+            value: b
+          - label: Option C
+            value: c
+
+- title: Label Options
+  blocks:
+    - id: label_with_colon
+      type: MultipleSelector
+      properties:
+        title: Select Items
+        label:
+          colon: true
+        options:
+          - Apple
+          - Banana
+          - Cherry
+    - id: label_no_colon
+      type: MultipleSelector
+      properties:
+        title: Select Items
+        label:
+          colon: false
+        options:
+          - Apple
+          - Banana
+          - Cherry
+    - id: label_right_align
+      type: MultipleSelector
+      properties:
+        title: Right Aligned
+        label:
+          align: right
+          inline: true
+          span: 8
+        options:
+          - Apple
+          - Banana
+          - Cherry
+    - id: label_left_align
+      type: MultipleSelector
+      properties:
+        title: Left Aligned
+        label:
+          align: left
+          inline: true
+          span: 8
+        options:
+          - Apple
+          - Banana
+          - Cherry
+    - id: label_extra
+      type: MultipleSelector
+      properties:
+        title: Skills
+        label:
+          extra: Select all skills that apply to this role.
+        options:
+          - label: JavaScript
+            value: js
+          - label: Python
+            value: py
+          - label: SQL
+            value: sql
+          - label: Docker
+            value: docker
+    - id: label_extra_html
+      type: MultipleSelector
+      properties:
+        title: Technologies
+        label:
+          extra: 'Choose from the <b>approved</b> technology list.'
+        options:
+          - label: React
+            value: react
+          - label: Node.js
+            value: node
+          - label: PostgreSQL
+            value: pg
+    - id: label_no_label
+      type: MultipleSelector
+      properties:
+        label:
+          disabled: true
+        placeholder: Select tags...
+        options:
+          - label: Frontend
+            value: frontend
+          - label: Backend
+            value: backend
+          - label: DevOps
+            value: devops
+          - label: Design
+            value: design
+          - label: QA
+            value: qa
+    - id: label_feedback_on
+      type: MultipleSelector
+      properties:
+        title: With Feedback
+        label:
+          hasFeedback: true
+        options:
+          - label: Valid
+            value: valid
+          - label: Invalid
+            value: invalid
+
+- title: Label Inline
+  blocks:
+    - id: label_inline
+      type: MultipleSelector
+      properties:
+        title: Inline Label
+        label:
+          inline: true
+          span: 6
+        options:
+          - label: Option 1
+            value: 1
+          - label: Option 2
+            value: 2
+          - label: Option 3
+            value: 3
+    - id: label_inline_wide
+      type: MultipleSelector
+      properties:
+        title: Wide Inline Label
+        label:
+          inline: true
+          span: 10
+        options:
+          - label: Option 1
+            value: 1
+          - label: Option 2
+            value: 2
+          - label: Option 3
+            value: 3
+
+- title: Scrollable Tag Container
+  blocks:
+    - id: scrollable_selector
+      type: MultipleSelector
+      style:
+        .selector:
+          maxHeight: 96px
+          overflowY: auto
+      properties:
+        title: Scrollable Selector
+        label:
+          extra: Cap the tag container at ~3 rows and scroll when more tags are selected.
+        placeholder: Pick several tags
+        renderTags: true
+        options:
+          - label: Alpha
+            value: alpha
+            tag:
+              color: blue
+          - label: Beta
+            value: beta
+            tag:
+              color: green
+          - label: Gamma
+            value: gamma
+            tag:
+              color: purple
+          - label: Delta
+            value: delta
+            tag:
+              color: orange
+          - label: Epsilon
+            value: epsilon
+            tag:
+              color: cyan
+          - label: Zeta
+            value: zeta
+            tag:
+              color: magenta
+          - label: Eta
+            value: eta
+            tag:
+              color: red
+          - label: Theta
+            value: theta
+            tag:
+              color: volcano
+          - label: Iota
+            value: iota
+            tag:
+              color: gold
+          - label: Kappa
+            value: kappa
+            tag:
+              color: geekblue
+
+- title: Style and Class Overrides
+  blocks:
+    - id: style_border
+      type: MultipleSelector
+      style:
+        .element:
+          border: 2px solid '#1677ff'
+          borderRadius: 8
+      properties:
+        title: Custom Border Style
+        label:
+          disabled: true
+        options:
+          - label: Alpha
+            value: alpha
+          - label: Beta
+            value: beta
+          - label: Gamma
+            value: gamma
+    - id: style_background
+      type: MultipleSelector
+      style:
+        .element:
+      properties:
+        title: Custom Background
+        label:
+          disabled: true
+        options:
+          - label: Option 1
+            value: 1
+          - label: Option 2
+            value: 2
+          - label: Option 3
+            value: 3
+    - id: class_tailwind_element
+      type: MultipleSelector
+      properties:
+        title: Tailwind Element Class
+        label:
+          disabled: true
+        options:
+          - label: One
+            value: 1
+          - label: Two
+            value: 2
+          - label: Three
+            value: 3
+      class:
+        element: rounded-lg shadow-sm
+    - id: class_tailwind_label
+      type: MultipleSelector
+      properties:
+        title: Styled Label
+        options:
+          - label: Alpha
+            value: alpha
+          - label: Beta
+            value: beta
+      class:
+        label: text-blue-600 font-semibold
+
+- title: Theme Token Overrides
+  blocks:
+    - id: theme_custom_colors
+      type: MultipleSelector
+      properties:
+        title: Custom Selection Colors
+        renderTags: true
+        theme:
+          optionSelectedColor: '#389e0d'
+          optionSelectedFontWeight: 700
+        options:
+          - label: Organic
+            value: organic
+            tag:
+              color: green
+          - label: Local
+            value: local
+            tag:
+              color: lime
+          - label: Imported
+            value: imported
+            tag:
+              color: gold
+    - id: theme_hover_active
+      type: MultipleSelector
+      properties:
+        title: Custom Hover and Active Colors
+        theme:
+          hoverBorderColor: '#722ed1'
+          activeBorderColor: '#531dab'
+          activeOutlineColor: 'rgba(114, 46, 209, 0.1)'
+        options:
+          - label: Design
+            value: design
+          - label: Engineering
+            value: engineering
+          - label: Marketing
+            value: marketing
+    - id: theme_multiple_item
+      type: MultipleSelector
+      properties:
+        title: Custom Tag Appearance
+        theme:
+          multipleItemBorderColor: '#91caff'
+          multipleItemHeight: 28
+        options:
+          - label: Small
+            value: small
+          - label: Medium
+            value: medium
+          - label: Large
+            value: large
+          - label: Extra Large
+            value: xl
+    - id: theme_large_tags
+      type: MultipleSelector
+      properties:
+        title: Large Multiple Items
+        size: large
+        theme:
+          multipleItemHeightLG: 36
+        options:
+          - label: Category A
+            value: a
+          - label: Category B
+            value: b
+          - label: Category C
+            value: c
+    - id: theme_small_tags
+      type: MultipleSelector
+      properties:
+        title: Small Multiple Items
+        size: small
+        theme:
+          multipleItemHeightSM: 18
+        options:
+          - label: Tag 1
+            value: 1
+          - label: Tag 2
+            value: 2
+          - label: Tag 3
+            value: 3
+
+- title: Combined Features
+  blocks:
+    - id: combined_full
+      type: MultipleSelector
+      properties:
+        title: Full Featured Selector
+        placeholder: Search and select roles...
+        renderTags: true
+        maxTagCount: 3
+        size: large
+        suffixIcon: AiOutlineTeam
+        selectedIcon: AiOutlineCheckCircle
+        label:
+          extra: Select up to 5 team roles for the project.
+        options:
+          - label: Project Manager
+            value: pm
+            tag:
+              title: PM
+              icon: AiOutlineCrown
+              color: gold
+          - label: Tech Lead
+            value: lead
+            tag:
+              title: Lead
+              icon: AiOutlineStar
+              color: blue
+          - label: Developer
+            value: dev
+            tag:
+              title: Dev
+              icon: AiOutlineCode
+              color: green
+          - label: Designer
+            value: design
+            tag:
+              title: UX
+              icon: AiOutlineBgColors
+              color: magenta
+          - label: QA Engineer
+            value: qa
+            tag:
+              title: QA
+              icon: AiOutlineBug
+              color: volcano
+          - label: DevOps
+            value: devops
+            tag:
+              title: Ops
+              icon: AiOutlineCloudServer
+              color: cyan
+    - id: combined_themed
+      type: MultipleSelector
+      properties:
+        title: Themed Selector
+        placeholder: Choose categories...
+        renderTags: true
+        theme:
+          optionSelectedColor: '#531dab'
+          hoverBorderColor: '#b37feb'
+          activeBorderColor: '#722ed1'
+          activeOutlineColor: 'rgba(114, 46, 209, 0.1)'
+          multipleItemBorderColor: '#d3adf7'
+        options:
+          - label: Analytics
+            value: analytics
+            tag:
+              color: purple
+          - label: Monitoring
+            value: monitoring
+            tag:
+              color: geekblue
+          - label: Alerting
+            value: alerting
+            tag:
+              color: red
+          - label: Reporting
+            value: reporting
+            tag:
+              color: cyan
+
+- title: MultipleSelector in Team Assignment
+  blocks:
+    - id: applied2_team_card
+      type: Card
+      properties:
+        title: Assign Team Members
+      blocks:
+        - id: applied2_team_project_name
+          type: TextInput
+          properties:
+            title: Project Name
+            placeholder: Enter project name
+            prefixIcon: AiOutlineProject
+        - id: applied2_team_members
+          type: MultipleSelector
+          properties:
+            title: Team Members
+            placeholder: Select team members...
+            renderTags: true
+            maxTagCount: 4
+            label:
+              extra: Select all team members for this project.
+            options:
+              - label: Alice Chen
+                value: alice
+                tag:
+                  color: blue
+              - label: Bob Martinez
+                value: bob
+                tag:
+                  color: green
+              - label: Carol Nguyen
+                value: carol
+                tag:
+                  color: purple
+              - label: David Kim
+                value: david
+                tag:
+                  color: orange
+              - label: Emma Wilson
+                value: emma
+                tag:
+                  color: cyan
+              - label: Frank Patel
+                value: frank
+                tag:
+                  color: magenta
+        - id: applied2_team_deadline
+          type: DateSelector
+          properties:
+            title: Project Deadline
+            placeholder: Select deadline
+            format: DD MMM YYYY
+            suffixIcon: AiOutlineCalendar
+        - id: applied2_team_assign_btn
+          type: Button
+          properties:
+            title: Assign Team
+            icon: AiOutlineTeam
+            type: primary
+            size: large
+            block: true
+          events:
+            onClick:
+              - id: assign_team_action
+                type: DisplayMessage
+                params:
+                  content: Team has been assigned to the project.
+                  duration: 3
+
+- title: MultipleSelector in Filter Panel
+  blocks:
+    - id: applied_filter_card
+      type: Card
+      properties:
+        title: Filter Products
+      blocks:
+        - id: applied_filter_categories
+          type: MultipleSelector
+          properties:
+            title: Categories
+            placeholder: Select categories to filter...
+            renderTags: true
+            options:
+              - label: Electronics
+                value: electronics
+                tag:
+                  color: blue
+              - label: Clothing
+                value: clothing
+                tag:
+                  color: green
+              - label: Books
+                value: books
+                tag:
+                  color: purple
+              - label: Home & Garden
+                value: home
+                tag:
+                  color: orange
+              - label: Sports
+                value: sports
+                tag:
+                  color: cyan
+          events:
+            onChange:
+              - id: filter_set_categories
+                type: SetState
+                params:
+                  selected_categories:
+                    _state: applied_filter_categories
+        - id: applied_filter_price_range
+          type: Selector
+          properties:
+            title: Price Range
+            placeholder: Select a price range...
+            options:
+              - label: Under $25
+                value: under_25
+              - label: $25 - $50
+                value: 25_50
+              - label: $50 - $100
+                value: 50_100
+              - label: Over $100
+                value: over_100
+        - id: applied_filter_apply_btn
+          type: Button
+          properties:
+            title: Apply Filters
+            icon: AiOutlineFilter
+            type: primary
+            block: true
+          events:
+            onClick:
+              - id: filter_apply_action
+                type: DisplayMessage
+                params:
+                  content: Filters applied successfully.
+                  duration: 3
+
+- title: Per-option Color
+  blocks:
+    - id: multiple_color_solid
+      type: MultipleSelector
+      properties:
+        title: 'Solid — filled colored tags'
+        variant: solid
+        options:
+          - label: Low
+            value: low
+            color: '#16a34a'
+          - label: Medium
+            value: medium
+            color: '#d97706'
+          - label: High
+            value: high
+            color: '#dc2626'
+    - id: multiple_color_outlined
+      type: MultipleSelector
+      properties:
+        title: 'Outlined — outlined colored tags'
+        variant: outlined
+        options:
+          - label: Low
+            value: low
+            color: '#16a34a'
+          - label: Medium
+            value: medium
+            color: '#d97706'
+          - label: High
+            value: high
+            color: '#dc2626'
+- title: Data driven (valueKey)
+  blocks:
+    - id: data_multiple_selector
+      type: MultipleSelector
+      properties:
+        title: Team
+        placeholder: Add people...
+        data:
+          - { id: 1, name: Ada }
+          - { id: 2, name: Linus }
+          - { id: 3, name: Grace }
+          - { id: 4, name: Alan }
+        html: '{{ item.name }}'
+        valueKey: id