---
type: snippet
tags: ['html', 'select']
status: release
ctime: 2022-04-09
mtime: 2024-03-22
---

디자인 된 `<select />`에 `placeholder` 개념이 있어서 어떻게 하면 좋을지 찾아봤다. 간략하게 설명하자면 선택이 불가능하게 `disabled` 추가하고 `hidden`으로 숨김 마지막으로 `selected`로 디폴트값을 처리하면 완성.

```js
function Select({ placeholder, children }) {
  return (
    <select>
      <option value="" disabled hidden selected>
        {placeholder}
      </option>
      {children}
    </select>
  )
}
```

---

- [How do I make a placeholder for a 'select' box?](https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box)