Native Select

An abstraction over a <select> that embeds some <option> elements.

We collect options in an array, and assign them to the data attribute. We describe each option with a label and a value.

const options = [
    { label: "Death Knight", value: "deathKnight" },
    { label: "Demon Hunter", value: "demonHunter" },
]
<NativeSelect data={options} />

If the value works as a label, such as when we want to surface the value in the UI, we can replace the objects with a single string instead. The string acts both as the value and as the label.

const options = ["deathKnight", "demonHunter"]