Provide compact visual boxes for users to choose data and information.

For proper styling, use the select element in addition to one of the many attributes and/or classes:

• multiple
• .smallest
• .smaller
• .small
• .medium
• .large
• .larger
• .largest

Additionally, use disabled to restrict the user from interacting with the select dropdown.

If you also want a helper on your select, use <p class="input--help">Help text here.</p>

To utilize, Insert an select-specific atom partial called "SelectAtom" via an Html Helper Extension method.

@Html.SelectAtom(SelectTypeEnum.Base, "testSelect")

Select Atom requires you specify a type via a "SelectTypeEnum" specification like "SelectTypeEnum.Multiple". You will also need to provide an Id, however, all other parameters are optional. Provide optional parameters by entering the parameter name followed by ':' and the value.

@Html.SelectAtom(SelectTypeEnum.Multiple, "SelectMultiple", customClass: "testSelect")