Listbox placeholder text

Hi there,

Wondering if there is some way you can recommend to provide placeholder text for a Listbox control?

i.e. some initial text that gets displayed but doesn’t actually result in the Listbox having any selection value.

I was thinking you could have empty state to begin with and have some initial text in the <Listbox.Button>

For example:

import React, { useState } from 'react'
import { Listbox } from '@headlessui/react'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]

function MyListbox() {
  const [selectedPerson, setSelectedPerson] = useState()

  return (
    <Listbox value={selectedPerson} onChange={setSelectedPerson}>
      <Listbox.Button>{selectedPerson ? selectedPerson.name : "Select person"}</Listbox.Button>
      <Listbox.Options>
        {people.map(person => (
          <Listbox.Option key={person.id} value={person}>
            {person.name}
          </Listbox.Option>
        ))}
      </Listbox.Options>
    </Listbox>
  )
}

[RobinMalfait]

@OneTuskedMario not sure what you are trying to do, but you can add a placeholder to the input like this:

<Combobox.Input
  // ...
  placeholder="Search here..."
/>

[fullhdpixel]

@amrithmmh exactly as the OP stated. Just make sure to not use any value or label from the selectedOption without checking if it exists.