A form control element used to select from several provided options and enter data.
install yarn add @clayui/form version use import {ClaySelect , ClaySelectWithOption } from '@clayui/form' ;
Select Element Sample 1 Sample 2 Sample 3 Sample 4
<div className ="form-group" >
<select className ="form-control" id ="regularSelectElement" >
<option >Sample 1</option >
<option >Sample 2</option >
<option >Sample 3</option >
<option >Sample 4</option >
</select >
</div > Disabled
Select Element Disabled Sample 1 Sample 2 Sample 3 Sample 4
<div className ="form-group" >
<label className ="disabled" for ="regularSelectElementDisabled"
>Select Element Disabled</label
>
<select className ="form-control" disabled id ="regularSelectElementDisabled" >
<option >Sample 1</option >
<option >Sample 2</option >
<option >Sample 3</option >
<option >Sample 4</option >
</select >
</div > Size
Select Element with Size 5 Sample 1 Sample 2 Sample 3 Sample 4 Sample 5 Sample 6 Sample 7 Sample 8
Select Element with Size 10 Sample 1 Sample 2 Sample 3 Sample 4 Sample 5 Sample 6 Sample 7 Sample 8
<div className ="form-group" >
<label for ="selectElementWithSize5" >Select Element with Size 5</label >
<select className ="form-control" id ="selectElementWithSize5" size ="5" >
<option >Sample 1</option >
<option >Sample 2</option >
<option >Sample 3</option >
<option >Sample 4</option >
<option >Sample 5</option >
<option >Sample 6</option >
<option >Sample 7</option >
<option >Sample 8</option >
</select >
</div >
<div className ="form-group" >
<label for ="selectElementWithSize10" >Select Element with Size 10</label >
<select className ="form-control" id ="selectElementWithSize10" size ="10" >
<option >Sample 1</option >
<option >Sample 2</option >
<option >Sample 3</option >
<option >Sample 4</option >
<option >Sample 5</option >
<option >Sample 6</option >
<option >Sample 7</option >
<option >Sample 8</option >
</select >
</div > Show code Multiple
Select Element with Multiple Select Options Sample 1 Sample 2 Sample 3 Sample 4 Sample 5 Sample 6 Sample 7 Sample 8
<div className ="form-group" >
<label for ="multipleSelectOptionsSelectElement"
>Select Element with Multiple Select Options</label
>
<select
className ="form-control"
id ="multipleSelectOptionsSelectElement"
multiple
>
<option >Sample 1</option >
<option >Sample 2</option >
<option >Sample 3</option >
<option >Sample 4</option >
<option >Sample 5</option >
<option >Sample 6</option >
<option >Sample 7</option >
<option >Sample 8</option >
</select >
</div > Show code Sm
Select Element Sm Sample 1 Sample 2 Sample 3 Sample 4
<div className ="form-group" >
<label for ="regularSelectElementSm" >Select Element Sm</label >
<select className ="form-control form-control-sm" id ="regularSelectElementSm" >
<option >Sample 1</option >
<option >Sample 2</option >
<option >Sample 3</option >
<option >Sample 4</option >
</select >
</div > Lg
Select Element Lg Sample 1 Sample 2 Sample 3 Sample 4
<div className ="form-group" >
<label for ="regularSelectElementLg" >Select Element Lg</label >
<select className ="form-control form-control-lg" id ="regularSelectElementLg" >
<option >Sample 1</option >
<option >Sample 2</option >
<option >Sample 3</option >
<option >Sample 4</option >
</select >
</div > Other Elements
The classes form-control form-control-select can be used to style various HTML elements like a select element. An example for this use case is a dropdown menu that is trigged by a select element.
A Button Styled Like a Select Element ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsualReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsualReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
<div className ="form-group" >
<label >A Div Styled Like a Select Element</label >
<div className ="form-control form-control-select" title ="..." >...</div >
</div >
<div className ="form-group" >
<label >An Anchor Styled Like a Select Element</label >
<a
className ="form-control form-control-select"
href ="#1"
role ="button"
title ="..."
>...</a
>
</div >
<div className ="form-group" >
<label >A Button Styled Like a Select Element</label >
<button
className ="form-control form-control-select"
title ="..."
type ="button"
>
...
</button >
</div > Show code Edit this page on GitHub Contributors
Matuzalém Teles, Patrick Yeo
Last edited May 9, 2025 at 6:15:38 AM
