#html로 태그된 메모

<select> 에는 placeholder 속성이 없다 — 값이 "" 인 첫 option 을 disabled 로 다시 못 고르게, hidden 으로 목록에서 숨긴다. 필수 입력(required)이면 스펙상 그 option 이 placeholder label option 이 되어, 고르지 않고 제출하면 막힌다.¹ React 에서는 <option selected> 대신 <select defaultValue=""> 로 기본 선택한다.²

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

How do I make a placeholder for a ‘select’ box?

HTML Standard — the select element: “If a select element has a required attribute specified, and has a display size of 1; and if the value of the first option element in the select element’s list of options (if any) is the empty string, … then that option is the select element’s placeholder label option.” ↩

Footnotes