description = "Demonstrates different display modes and features for multiselect fields"
name = "MultiSelect Display Modes Demo"

# List mode (default) - vertical checkboxes
[[elements]]
default = "logging"
help = "Vertical checkbox list"
name = "features_list"
options = [
  { value = "logging", label = "📝 Logging" },
  { value = "metrics", label = "📊 Metrics" },
  { value = "tracing", label = "🔍 Tracing" },
  { value = "profiling", label = "⚡ Profiling" },
]
prompt = "Features (List mode - default)"
type = "multiselect"

# Grid mode - responsive grid layout
[[elements]]
default = "rust,python"
display_mode = "grid"
help = "Responsive grid with icons"
name = "languages_grid"
options = [
  { value = "rust", label = "🦀 Rust" },
  { value = "python", label = "🐍 Python" },
  { value = "javascript", label = "📜 JavaScript" },
  { value = "go", label = "🐹 Go" },
  { value = "java", label = "☕ Java" },
  { value = "csharp", label = "🔵 C#" },
]
prompt = "Programming Languages (Grid mode)"
searchable = true
type = "multiselect"

# Dropdown mode - native select multiple with search
[[elements]]
display_mode = "dropdown"
help = "Use dropdown mode for 10+ options"
max_selected = 3
min_selected = 1
name = "frameworks"
options = [
  { value = "react", label = "React" },
  { value = "vue", label = "Vue" },
  { value = "angular", label = "Angular" },
  { value = "svelte", label = "Svelte" },
  { value = "nextjs", label = "Next.js" },
  { value = "nuxt", label = "Nuxt" },
  { value = "astro", label = "Astro" },
  { value = "remix", label = "Remix" },
  { value = "gatsby", label = "Gatsby" },
  { value = "qwik", label = "Qwik" },
]
prompt = "Web Frameworks"
required = true
searchable = true
type = "multiselect"

# Example with min/max validation
[[elements]]
default = "read"
display_mode = "grid"
help = "Select between 1 and 3 permissions"
max_selected = 3
min_selected = 1
name = "permissions"
options = [
  { value = "read", label = "📖 Read" },
  { value = "write", label = "✏️ Write" },
  { value = "delete", label = "🗑️ Delete" },
  { value = "admin", label = "🔑 Admin" },
]
prompt = "User Permissions"
type = "multiselect"
