Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
Groups related options within a select element under a visible label. Helps users scan long option lists organized into logical categories.
The shared select demo below includes an optgroup example showing countries grouped by region.
The required label attribute provides the group heading displayed in bold above the options.
<select id="category"> <option value="">Select a category...</option> <optgroup label="Fruits"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="orange">Orange</option> </optgroup> <optgroup label="Vegetables"> <option value="carrot">Carrot</option> <option value="broccoli">Broccoli</option> <option value="spinach">Spinach</option> </optgroup></select>
| Attribute | Purpose | Required |
|---|---|---|
label |
The group heading text displayed above the options | Yes |
disabled |
Disables all options in the group | No |
Disabling an optgroup makes every option within it unselectable. This is useful for showing choices that exist but are not currently available.
<select> <optgroup label="Standard Shipping"> <option value="ground">Ground (5-7 days) - Free</option> <option value="priority">Priority (3-5 days) - $9.99</option> </optgroup> <optgroup label="Express Shipping" disabled> <option value="express">Express (2 days) - $19.99</option> <option value="overnight">Overnight - $34.99</option> </optgroup></select>
font-weight: 600 on the group label but cannot change backgrounds, colors, or add iconslabel attribute must be provided; there is no fallback textFor fully custom grouped dropdowns with arbitrary styling, consider the combo-box web component.
label attribute should clearly describe what the group containsoptgroup { font-weight: 600;} /* Note: optgroup styling is largely controlled by the browser/OS. Most browsers display the label in bold by default. VB reinforces this with font-weight: 600. */