DEV Community

Posted on

HTML : Group related options in a drop-down list

To achieve the list as dropdown list shown below -
Alt Text
we can use optgroup tag mentioned below-

<form action="/action_page.php">
  <label for="skills">Choose a Skill:</label>
  <select name="skills" id="skills">
    <optgroup label="FrontEnd">
      <option value="Angular">Angular</option>
      <option value="React">React</option>
    <optgroup label="Backend">
      <option value="Java">Java</option>
      <option value="PHP">PHP</option>
  <input type="submit" value="Submit">
Enter fullscreen mode Exit fullscreen mode



The <optgroup> tag is used to group related options in a element (drop-down list).

If you have a long list of options, groups of related options are easier to handle for a user.

Buy Me A Coffee

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.

Top comments (1)

charitygamble profile image
Charity Gamble

Nice. I'd never heard of the optgroup tag. I'll have to use it next time I'm coding a dropdown menu.