Select
A form control element used to select from several provided options and enter data.
install | yarn add @clayui/form |
---|---|
version | 3.122.0 |
Stable3.122.0View in LexiconCHANGELOG
Select Menu
Copied!
<div class="form-group">
<select class="form-control" id="regularSelectElement">
<option>Sample 1</option>
<option>Sample 2</option>
<option>Sample 3</option>
<option>Sample 4</option>
</select>
</div>
Disabled
Copied!
<div class="form-group">
<label class="disabled" for="regularSelectElementDisabled"
>Select Element Disabled</label
>
<select class="form-control" disabled id="regularSelectElementDisabled">
<option>Sample 1</option>
<option>Sample 2</option>
<option>Sample 3</option>
<option>Sample 4</option>
</select>
</div>
Size
Copied!
<div class="form-group">
<label for="selectElementWithSize5">Select Element with Size 5</label>
<select class="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 class="form-group">
<label for="selectElementWithSize10">Select Element with Size 10</label>
<select class="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>
Multiple
Copied!
<div class="form-group">
<label for="multipleSelectOptionsSelectElement"
>Select Element with Multiple Select Options</label
>
<select
class="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>
Sm
Copied!
<div class="form-group">
<label for="regularSelectElementSm">Select Element Sm</label>
<select class="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
Copied!
<div class="form-group">
<label for="regularSelectElementLg">Select Element Lg</label>
<select class="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.
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsualReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsualReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
Copied!
<div class="form-group">
<label>A Div Styled Like a Select Element</label>
<div class="form-control form-control-select" title="...">...</div>
</div>
<div class="form-group">
<label>An Anchor Styled Like a Select Element</label>
<a
class="form-control form-control-select"
href="#1"
role="button"
title="..."
>...</a
>
</div>
<div class="form-group">
<label>A Button Styled Like a Select Element</label>
<button class="form-control form-control-select" title="..." type="button">
...
</button>
</div>