Trouble with forms...
I'm facing trouble with certain factors for creating a form. I need
- a multiselect dropdown feature that's much better than the html one (pic1, like who even uses this...)
- i need a required attribute for the form components
I see that opensaas.sh has headless ui, but headless ui does not support the required attribute... also not sure whether it has a multiselect dropdown.
i tried to use chakra ui but idk if i'm doing it wrongly, head to use the chakra multiselect package (pic2) as well (why don't they support multiselect natively...) it doesn't look as nice as i thought, especially when switch to dark mode, not sure how theming works.
sorry if these are all basic questions, i'm still a newbie in frontend
5 Replies
Hi @linus. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
No worries about being a newbie, we all start somewhere!
For the multiselect dropdown feature, you might want to consider using a library that provides this feature. Unfortunately, I don't have information on a specific library that provides this feature from the provided knowledge sources.
As for the required attribute, it's true that headless UI might not support it directly. However, you can implement this functionality yourself in your form handling logic. When the form is submitted, you can check if the required fields are filled in, and if not, prevent the form from being submitted and show an error message.
Regarding Chakra UI, it's a great library for building UIs in React. However, the provided knowledge sources do not contain specific information about using Chakra UI with Wasp or OpenSaaS.
For theming, most UI libraries (including Chakra UI) provide a way to customize the theme, but the specifics can vary. You'll want to check the documentation of the library you're using for details on how to customize the theme.
Lastly, if you're using Wasp, you might find the Wasp documentation (https://wasp-lang.dev/docs/auth/ui) helpful. It provides an overview of how to work with forms in Wasp.
Remember, it's okay to ask questions and seek help. That's how we learn and grow as developers!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @linus, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
i don't want to implement my own required attribute logic, seems so unnecessary... just wondering why so many modern ui libraries don't support multiselect dropdown, like chakra, shadcn, is this not a common component??
Hey @linus ! This isn't really Wasp or OpenSaas specific, so I don't have any unique insights to offer beyond what you can search online. I personally haven't used such component recently so I don't have a good answer off the bat. Maybe this one would be interesting? https://react-select.com/home -> you would have to do styling yourself though.
One thing that comes to my mind is also using a normal, non-multi select component, and then combining it with a list of stuff selected so far -> so you would add that item to the list of what is selected so far, and the next time select component is opepned, you don't show taht one. But yeah, you would need to pop it open multiple times to select multiple items.
React-Select
React-Select
A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support.
@martinsos thanks for the input! i tried react-select as well, reopening to add options to the list is not very user-friendly imo, so i decided not to use it :/
@linus https://mui.com/material-ui/react-select/ Material UI offers this. But i dont know if this is interesting for you to use.
React Select component - Material UI
Select components are used for collecting user provided information from a list of options.