A ListboxOption must have a value prop.

[cristianpascottini]

Hi!
Can you please explain the ratio behind this?

  if (__DEV__ && !value) {
    throw Error(`A ListboxOption must have a value prop.`);
  }

Why is it not possible to let a ListboxOption have an empty string as a value? Or even the number0?
Are there other ways to do it?

Many thanks.

[indiesquidge]

Why is it not possible to let a ListboxOption have an empty string as a value? Or even the number0?

@cristianpascottini if the Listbox behaved as though it were using React's typings for an option element, then value should indeed be optional or be allowed to be a number. However, in Reach's Listbox, not having a value for an option would be a bit awkward. (Even in native HTML, the value attribute would need to be required if HTML didn't fall back on a sophisticated approach of finding the nested text IDL attribute of the option otherwise.)

As to why e.g. a number is not allowed, I suppose a case could be made to allow it, and change the conditional to if (__DEV__ && value == undefined). However, you could implement this yourself at the product level by coercing your values into numbers when they are selected if you really wanted.

<Listbox onChange={(value) => {
  console.log(Number(value));
}}>
  <ListboxOption value="0">Option 0</ListboxOption>
  <ListboxOption value="1">Option 1</ListboxOption>
  <ListboxOption value="2">Option 2</ListboxOption>
</Listbox>

One of Reach's philosophies is to be as close to HTML behavior as possible. And while HTML will let you pass e.g. a number as an option's value, the value being submitted as form data will be serialized as a string anyway.

Is there a specific non-string value case you are attempting to create?