Listbox placeholder text

[miller-productions]

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]

Hey! Thank you for your question!

I think doing it like that is a good solution and gives you all the flexibility you need.
You can even use custom elements with some custom styles if needed.

I think this is a better solution compared to that we provide an API to it, because currently you already have all the flexibility you need!

[miller-productions]

Thanks for the feedback @RobinMalfait.

[amrithmmh]

Can anyone please add an example of how to add a placeholder text?

[thijssmudde]

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

[OneTuskedMario]

This is my workaround for the combobox:

document.getElementById('headlessui-combobox-input-:r1:').setAttribute('placeholder', 'Search here..');

and then you can style it on the input

<Combobox.Input
    className="placeholder-opacity-100 focus-visible:placeholder-opacity-25 placeholder-darkBlue"
/>

[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..."
/>

[OneTuskedMario]

@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..."
/>

Lmao, thank you the most obvious thing somehow escaped me

[evertjr]

While this solution works it causes a critical accessibility issue, the NVDA Screen reader can't see the options unless theres a default value in the state, even though they are visible on the screen . I'm trying to find some workaround because I don't want any pre selected value.