--- meta: title: Option Group description: Option groups organize options within a select under labeled headers. layout: component --- ## Examples ### Basic Option Group Use `` inside a `` to group related options under a labeled header. Set the `label` attribute to provide the group heading. ```html:preview Orange Lemon Lime Strawberry Blueberry Raspberry ``` ### Disabled Group Use the `disabled` attribute to disable all options within a group. Disabled groups propagate the disabled state to their child options automatically. ```html:preview Basic Pro Enterprise Unlimited ``` ### With Search When used inside a `` with the `search` attribute, group headers automatically hide when all of their child options are filtered out by the search query. ```html:preview United States Canada Mexico United Kingdom Germany France Japan China India ``` ### Mixed Grouped and Ungrouped You can mix standalone options with grouped options in the same select. ```html:preview None Option A1 Option A2 Option B1 Option B2 ``` ### Multiple Selection with Groups Option groups work with multi-select. Use `multiple` and `clearable` on the parent ``. ```html:preview HTML CSS JavaScript TypeScript Node.js Go Python PHP ```