TIL of the selectopt group

POSTED ON: Apr 24, 2022

TAGS: html forms selectors mdn codepen

You can create some cool dividers for your field options using the optgroup element. MDN

<select>
  <option>--Your Favourite Animal--</option>
  <optgroup label="Birds">
    <option>Blue Jay</option>
    <option>Cardinal</option>
    <option>Hummingbird</option>
  </optgroup>
  <optgroup label="Sea Creatures">
    <option>Shark</option>
    <option>Clownfish</option>
    <option>Whale</option>
  </optgroup>
  <optgroup label="Mammals">
    <option>Lion</option>
    <option>Squirrel</option>
    <option>Quokka</option>
  </optgroup>
</select>

You can even disable the whole group using the disabled attribute!

See the Pen Using the label Attribute with optgroup Elements by Smashing Magazine (@smashingmag) on CodePen.

Related TILs

Tagged: html

• Next: TIL about IPv4 Private IP addressesThe IP '10.0.0.1' is a Class A address. The IP '172.16.0.1' is a Class B address. The IP '192.168.0.1' is a Class C address.
• Previous: TIL you can wire different inputs to different formsYou can add the form element inside a input, to point specifically to the form you want to target.