Discussion on: Does anyone else think HTML5 multiple select sucks?

[Klemen Slavič]

You might as well just generate a scrollable list of checkboxes:

const Multiselect = ({name, options = []}) => {
  return (
    <ul style={{overflow: 'auto'}}>
      {options.map(({ value, label, selected }) => (
        <li>
          <label>
            <checkbox name={`${name}[]`} value={value} checked={selected}/>
            {label}
          </label>
        </li>
      ))}
    </ul>
  );
};

const options = [
  { value: 1, label: 'magic', selected: false },
  { value: 2, label: 'sauce', selected: true }
];

render(<Multiselect name="yourFieldName" options={options}/>, document.body);

Why complicate your life? 😁

Ignore above advice if you have a really long list and you need filtering. But given that the original doesn't support anything like that, it's a fair comparison.

[Nick Karnik]

Perhaps you should also post an example in vanilla JS.

[Klemen Slavič]

Funny enough, I started with vanilla, but it was a bit noisy with all the createElement|TextNode bits so much more conveniently expressed in JSX. But yeah, agree, it's creature comfort and unnecessary.