Skip to content

[Request] header component or multiselect with multiple groups #197

Open
@benmccann

Description

@benmccann

Is your feature request related to a problem? Please describe.
I would like to group items for some organization, but I don't want to make it feel like we're sending the user through tons of different prompts.

Describe the solution you'd like
Something like what's pictured below. This example is split into two prompts which each display multiple groups.

┌  Welcome to Svelte Add
│
◇  Which libraries would you like to setup?
│ Testing
│  ◻ Playwright
│  ◻ vitest
│
│ Code quality
│  ◻ prettier
│  ◻ eslint
│
│ CSS
│  ◻ Open Props
│  ◻ UnoCSS
│  ◻ TailwindCSS
│  ◻ Ant Design
│  ◻ Bootstrap
│  ◻ Bulma
│
◇  Which application functionality would you like to setup?
│ Database
│  ◻ Drizzle
│
│ Auth
│  ◻ Lucia
│  ◻ Auth.js
│
│ Markdown
│  ◻ mdsvex
│
│ Other tools
│  ◻ Storybook
└

Describe alternatives you've considered
Today, as far as I'm aware, we'd need to split each of these groups into a separate prompt. It would make the user go through seven prompts in the example above, which just feels too long.

Additional context
I'd like to use this for svelte-add, which can be run with npx svelte-add and is available at https://github.com/svelte-add/svelte-add

Activity

benmccann

benmccann commented on Nov 20, 2024

@benmccann
Author

We used this for an early version of the Svelte CLI, but ended up going back to the standard prompts. A lot of the reason was unrelated to the design of the prompt, which is that we had too many groups with just a single item. There was also a bit of debate over whether the UI was taking up too much vertical space though. Here's where we landed:

385878257-41b5bcbc-92d5-4ea2-b3b0-1e207ed2b6fc

moved this from Needs triage to In review in Triage Boardon Jan 4, 2025
daltonmenezes

daltonmenezes commented on May 11, 2025

@daltonmenezes

@natemoo-re It would be great not only for multiselect, but also for the select component in cases we need a main menu separating the options per context:

┌  Welcome to the app
│
◇ ---- users ----
│  ( ) create user
│  ( ) update user
│  ( ) delete user
◇ ---- feature flags ----
│  ( ) create flag
│  ( ) update flag
│  ( ) delete flag
│  ( ) add flag to user
43081j

43081j commented on May 12, 2025

@43081j
Collaborator

Is this achievable now through a group multi select which has selectableGroups: false?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    Status

    In review

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @benmccann@daltonmenezes@43081j

      Issue actions

        [Request] header component or multiselect with multiple groups · Issue #197 · bombshell-dev/clack