Input.select not available in Elm-UI?

Learn
1

In Style Elements there is Input.select which does not appear to be available in Elm-UI.

How would I go about creating a selectable list of options with Elm-UI?

Thanks in advance.

2

Lots of ways to do this, I’m sure. I think they will all boil down to storing the selections in the model and updating the model on click events of the items of interest.
Very simple example:
https://ellie-app.com/4mqfDW4k759a1
You could style the list based on inclusion in the model.selection to alert the user that the selection took place. The super simple example above you have to look at debug to see that it got added.
A better method would be to make onClick toggle selection so that items can be added and removed.

3

Thanks, but I was thinking more of a drop down menu (should have elaborated better), that opens and closes when clicked, with the options overlaying existing content below.

It was simple to set up in Style Elements and was surprised to see that it wasn’t included in Elm-UI - I’d be interested to understand why it wasn’t included if anyone has any insights.

If there’s no standard way of creating this I’ll look into rolling my own.

Thanks for taking the time to reply.

4

Yeah, there was a fair bit of discussion in the slack channel about dropdowns and such. Rolling your own seems to be the way to go. Sorry I misunderstood your situation initially.

1 Like
5

The missing select in Elm-UI is intentional because, generally speaking, drop downs menus can be misused easily thus creating sub optimal UI’s. A couple of links:

So the author decided to not include the select widget. If you have few items you can use a columns of radio buttons, if you have a long list perhaps the user is better
served with an autocomplete text box - granted a more challenging solution to code.

Hope this helps.

2 Likes
6

That helps a lot, the links were useful and provided some good reading.

For the current project I’ll use a row of buttons for short lists. For longer lists I have some ideas that do actually make more sense from the user perspective than having to scroll a long list of options, especially as I need to allow the user to select the same options multiple times.

I’m glad the select widget was dropped now I understand why.

Thank you.

7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.