# Grouping Items

The standard **`<SELECT>`** element has a **`<optgroup>`** tag used to group together related options.

This article shows how make **RadComboBox** look and feel the same way.

1. Use the [IsSeparator](https://www.telerik.com/products/aspnet-ajax/documentation/controls/combobox/appearance-and-styling/separators) property to make the appropriate items not clickable:

```ASPNET
<telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1"
   runat="server"
   Skin="Vista"
   Width="150px"
   AllowCustomText="true">
   <Items>
	   <telerik:RadComboBoxItem runat="server" IsSeparator="True" Text="Swedish Cars"/>
	   <telerik:RadComboBoxItem runat="server" Text="Volvo" />
	   <telerik:RadComboBoxItem runat="server" Text="Saab" />
	   <telerik:RadComboBoxItem runat="server" IsSeparator="True" Text="German Cars" />
	   <telerik:RadComboBoxItem runat="server" Text="Mercedes" />
	   <telerik:RadComboBoxItem runat="server" Text="Audi" />
   </Items>
</telerik:RadComboBox> 
```

2. Add the following CSS rules to the `<HEAD>` section of your page to achieve the desired look:

```ASPNET
<style type="text/css">
	div.RadComboBoxDropDown_Vista .rcbSeparator
	{
		background: none;
		font-family: Arial;
		font-weight: bold;
		font-style: italic;
		font-size: 10pt;
		padding-left: 6px !important;
	}
	div.RadComboBoxDropDown_Vista .rcbItem, div.RadComboBoxDropDown_Vista .rcbHovered
	{
		padding-left: 20px;
		font-family: Arial;
		font-size: 10pt;
	}
</style>
```

If you are using a skin different from Vista, just replace "Vista" with the name of your skin.

Here is the result:

![RadComboBox: Group related items](https://www.telerik.com/products/aspnet-ajax/documentation/assets/48157153a524f03bf8cf4ac0c3752abb/combobox_group_related_items.png)
