splitforms.com
Get free key

HTML · FORM CONTROL

HTML optgroup: Group Options in a Select Dropdown

Last reviewed

The <optgroup> element wraps related <option> elements inside a <select> under a non-selectable heading set by its required label attribute. Only the options submit a value. The group label never does.

Edit the live exampleCopy the snippet
  • Live, editable example
  • Copy-paste snippet
  • Attributes & common mistakes
Live demo · nothing is sent

What gets submitted

Fill in the form above and press its button. The demo stops the request and lists every name=value pair the browser would send, plus the controls it leaves out.

With a free access key in the form, these fields land in your splitforms dashboard; access_key and botcheck are read by splitforms, not stored as lead data.

Edit the HTML and re-run it
Runs in a sandbox. Nothing is sent.

Minimal snippet

optgroup-example.html
<select name="car">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Copy-paste code

HTML Optgroup code you can paste today.

Replace YOUR_ACCESS_KEY with a key from your free splitforms dashboard. The form posts to one endpoint — submissions land in your inbox and dashboard with spam filtering built in.

Get free access key
optgroup.html
<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="vehicle">Vehicle</label>
  <select id="vehicle" name="vehicle" required>
    <option value="" disabled selected>Choose a vehicle…</option>
    <optgroup label="Sedans">
      <option value="camry">Toyota Camry</option>
      <option value="accord">Honda Accord</option>
    </optgroup>
    <optgroup label="Discontinued models" disabled>
      <option value="pontiac">Pontiac G6</option>
      <option value="saturn">Saturn Aura</option>
    </optgroup>
    <optgroup label="Electric">
      <option value="model3">Tesla Model 3</option>
      <option value="leaf">Nissan Leaf</option>
    </optgroup>
  </select>

  <input type="checkbox" name="botcheck" style="display:none">
  <button type="submit">Send</button>
</form>

Attributes · <optgroup>

Which <optgroup> attributes matter?

The group heading comes from label; disabled turns off every option in the group.

HTML Optgroup attributes and what each one does
AttributeWhat it doesDocs
labelRequired. The visible group heading shown in the dropdown. It is not an option and cannot be selected or submitted.MDN
disabledBoolean. Disables every <option> inside the group so none can be chosen or submitted.MDN
value (on option)The string sent as name=value when this option is chosen. Without it, the option's text is sent instead.MDN
selected (on option)Boolean. Makes this option the default choice when the page loads.MDN
disabled (on option)Boolean. The option is shown but cannot be picked. Pair it with value="" and selected for a placeholder.MDN
required (on select)Blocks submit while the selected option has an empty value, so a value="" placeholder forces a real choice.MDN

Common mistakes

optgroup mistakes to avoid

Treat labels as headings, not values, and know what native styling can change.

  1. Only option values are submitted

    When the form submits, the browser sends the selected <option>'s value under the <select>'s name. The optgroup label is presentation only and never appears in the entry list.

  2. You cannot nest optgroups

    HTML does not allow an <optgroup> inside another <optgroup>. Browsers flatten invalid markup. Use a short prefix on option text ("SUV — Toyota RAV4") or split choices across two dependent <select> elements instead.

  3. Styling limits in the native dropdown

    Most browsers ignore most CSS on <optgroup> and <option> in the closed and open native list, aside from basic color and font settings on some platforms. Customizable select (appearance: base-select) is an emerging way to style the list where supported, but it is not widely available yet.

  4. Keep group labels short for screen readers

    Assistive technology announces the optgroup label when the user moves through options in that group. Long headings make every option verbose; use a few words and put detail in the option text.

  5. Use optgroup in React JSX

    JSX accepts <optgroup label="Sedans"> with <option> children unchanged. Map grouped data with nested arrays: groups.map(g => <optgroup key={g.id} label={g.label}>{g.items.map(...)}</optgroup>).

  6. When two selects work better

    If the first choice filters the second (country then city), pair two <select> elements and refill the second list in JavaScript. Optgroups suit one flat list with visual sections, not dependent data.

  7. A required placeholder needs value=""

    required only blocks submit when the selected option's value is empty. A placeholder like <option>Choose a topic</option> with no value attribute submits its text, so write <option value="" disabled selected>Choose a topic</option>.

  8. Duplicate values across groups lose the group

    If "Pricing" has value="pricing" in both a Sales and a Support group, the backend cannot tell which group was chosen, because the label is never sent. Put the group in the value, such as sales-pricing and support-pricing.

Sources: WHATWG HTML Standard: optgroup · MDN: <optgroup>

Related elements

Related elements to read next

Copy-paste ready

The HTML Optgroup example below is a complete, working form — paste it into any HTML page and it submits, no edits to the markup required.

No backend to build

Your html optgroup form posts to one endpoint. No server, PHP, or API route — accepted submissions are saved to your dashboard before owner notification email is attempted; delivery time and inbox placement depend on provider and recipient settings.

A form that really submits

Unlike a static reference snippet, this <optgroup> form actually sends data to a free splitforms backend, with spam filtering built in.

How it works

How to add HTML Optgroup to any page.

Copy the html optgroup example, drop in your free access key, and paste it into any page — submissions start landing in your dashboard.

Copy the code

Copy the HTML Optgroup example below.

Add your access key

Replace YOUR_ACCESS_KEY with a free splitforms key from the dashboard.

Paste into your site

Drop the form into any HTML page. Submissions arrive in your dashboard.

Get free access keyAll HTML elements

How SplitForms works

What happens after someone submits your form?

splitforms receives the submission, filters spam, saves it to your dashboard and emails you — then, on paid plans, sends it on to your webhooks and integrations. No backend infrastructure to build.

A SplitForms contact form submission launching straight to your inbox

Add your endpoint

Point your form to your unique SplitForms endpoint. That's it.

HTML form pointing at a SplitForms submit endpoint

Receive submissions

We instantly capture and organize every submission in your inbox.

Submissions inbox with searchable leads and status pills

Route anywhere

Send data to email, spreadsheets, CRMs, webhooks, and 7,000+ apps.

Generic integration tiles for email, sheets, chat, CRM, automate, and webhook
Start FreeRead the Docs

No credit card required. Set up in under 60 seconds.

Connect & automate

Where can submissions go besides email?

On paid plans, submissions can also go to Slack, Discord, Google Sheets, Notion, Airtable, Zapier or any signed webhook — and splitforms works on the platforms you build on, from WordPress and Shopify to Next.js. With Stripe connected, your forms can take payments too.

Connect your SplitForms form to Slack, Google Sheets, Mailchimp, Zapier and more
StripePaymentsDiscordMessagingTelegramMessagingGoogle SheetsSpreadsheetNotionDatabaseMailchimpEmailMakeAutomationWebhookCustomWordPressPlatformShopifyPlatformFramerPlatformNext.jsFrameworkHTMLFramework
SlackMessagingWhatsAppMessagingTeamsMessagingAirtableDatabaseHubSpotCRMZapierAutomationn8nAutomationMCP / AIAgentsElementorPlatformWebflowPlatformCarrdPlatformReactFramework
NewTake payments on your formsDeposits, bookings, order forms — submitters check out through Stripe and the money goes straight to your Stripe account. Included on every paid plan.See payment forms →Need time slots? Online booking →
View all integrations →

Setup guides for the stacks you use

HTMLReactNext.jsAstroWebflowWordPress

Questions

HTML Optgroup questions, answered.

View all FAQs
What is an optgroup in HTML?

An <optgroup> groups related <option> elements inside a <select>. Its required label attribute sets the non-selectable heading shown in the dropdown. Users pick an option; the label is never submitted.

What value does the form submit from an optgroup?

Only the selected <option>'s value is submitted, under the <select>'s name attribute. The optgroup label is not form data. If an option has no value attribute, its visible text is submitted instead.

Can you nest optgroups inside each other?

No. Nested optgroups are invalid HTML and browsers flatten them. Use prefixed option text or separate selects for hierarchical choices.

How do I disable every option in a group?

Add the disabled attribute to the <optgroup>, for example <optgroup label="Sold out" disabled>. Every option inside that group is disabled and cannot be selected.

Can you style optgroup with CSS?

In most browsers, native dropdown styling for <optgroup> and <option> is very limited. Basic font and color may apply on some platforms. Newer browsers are adding a customizable select (appearance: base-select); treat it as a progressive enhancement and keep the native select working without it.

How do I use optgroup in React?

Use <optgroup label="Group name"> with <option value="..."> children inside your <select>. Map over grouped data to render one optgroup per section. The label prop is required in JSX as in HTML.

Optgroup vs two separate select dropdowns?

Use optgroups when all options belong to one field and you only need visual sections. Use two linked selects when the first choice changes which options appear in the second, such as category then product.

How do I set a default selected option?

Add the selected attribute to that <option>, for example <option value="sales-pricing" selected>Pricing</option>. Without it, the first option that isn't disabled is selected.

How do I make a placeholder option that can't be submitted?

Put <option value="" disabled selected>Choose a topic</option> first and add required to the <select>. The placeholder shows on load, can't be picked again, and the empty value blocks submit until the user chooses a real option.

How do I group options in a multiple select?

Optgroups work the same in <select multiple>. Each selected option is sent as its own name=value pair. The group label is not sent, so put the group in the value (e.g. sales-pricing) if the backend needs it.

Simple pricing

How much does splitforms cost?

Free gives you 500 submissions for $0 — no card, no time limit. Pro is $5/month for 5,000 submissions a month, and Annual is $49/year for 15,000 a month with every Pro feature.

Free

$0— 500 submissions
 

No card, no time limit

Best for testing

For side projects and indie devs.

  • 500 free submissions
  • Unlimited forms
  • Email notifications included
  • Smart spam filtering
  • Submissions dashboard
  • Redirect after submit
  • MCP server included
Get Started
Recommended

Pro

$5/ month
Billed monthly

Every paid feature, for agencies and growing products.

  • 5,000 submissions per month
  • Unlimited forms
  • Webhooks and integrations
  • CC/BCC, auto-replies and routing
  • File uploads with 500 MB storage
  • Stripe payments on your forms
  • 3 team seats
  • Cancel anytime

Annual

$49/ year
About $4.08 per month, billed yearly
Best value

Every Pro feature with triple the volume — $0.27 per 1,000 at full use.

  • 15,000 submissions per month
  • Unlimited forms
  • Everything in Pro
  • File uploads with 5 GB storage
  • 3 team seats
  • Priority email support

No credit card required on Free • Cancel anytime • Full pricing and FAQ