thisbeyond / solid-select

The Select component for Solid.
https://solid-select.com
MIT License
174 stars 17 forks source link

No example for Option Label and Value #38

Closed Antebios closed 1 year ago

Antebios commented 1 year ago

With Select input there is usually an option for the visible option as the Label and the actual value. For example, U.S. states where the label is the full name of the state and the value is the abbreviation. I can see that the source code can make use of both label and value but I do not see an example of how to leverage them.

martinpengellyphillips commented 1 year ago

Essentially the value of the select can be treated as the raw value - this is what is passed in onchange etc. The display label is the result of the format function, which can also format differently depending on whether it is for an option in the list or a displayed value in the field.

I'll add an explicit example to make it clearer 🙂

Antebios commented 1 year ago

I look forward to the example, I understand what you mean but I need to see how to set the data up to begin with. What is the format of the data?

martinpengellyphillips commented 1 year ago

The format of the data is whatever you want. Whatever is passed to the select as a value will be its value. You can then use format to control what is displayed in the option list and the select. See this new example: https://solid-select.com/?example=Format

One thing to note perhaps is that there is no builtin support for using this directly in form submission. The input component is only used for editing. If using with a form, you should wrap the Select and use onChange to control your form field value (or integrate the underlying createSelect directly).