Menu

Select

v1.0.0
Style native select elements with consistent spacing, focus states and validation styles.
Select

Use .form-select to style native select elements.

<div>
	<label class="form-label" for="selectExample">Select label</label>
	<select class="form-select" id="selectExample" name="selectExample">
		<option value="not-specified">not specified</option>
		<option value="male">Male</option>
		<option value="female">Female</option>
	</select>
</div>
Invalid
Please select a status.
<div>
	<label class="form-label" for="invalidSelect">Invalid select</label>
	<select class="form-select is-invalid" id="invalidSelect" name="invalidSelect">
		<option value="">Please select</option>
		<option value="active">Active</option>
		<option value="pending">Pending</option>
	</select>
	<div class="invalid-feedback">Please select a status.</div>
</div>
Disabled
<div>
	<label class="form-label" for="disabledSelect">Disabled select</label>
	<select class="form-select" id="disabledSelect" disabled>
		<option>Disabled select</option>
	</select>
</div>

Previous: Components

← Radio

Next: Components

Switch →