Select

Select

Apply .form-select to native selects.

<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

Use aria-invalid=“true” and link feedback with aria-describedby and its id.

<div>
	<label class="form-label" for="invalidSelect">Invalid select</label>
	<select
		class="form-select is-invalid"
		id="invalidSelect"
		name="invalidSelect"
		aria-invalid="true"
		aria-describedby="invalidSelectFeedback">
		<option value="">Please select</option>
		<option value="active">Active</option>
		<option value="pending">Pending</option>
	</select>
	<div class="invalid-feedback" id="invalidSelectFeedback">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>

CSS Variables

Override these variables on the component or an ancestor.

--form-select-bg-color: var(--bg-surface);
--form-select-border-width: var(--border-width);
--form-select-border-color: var(--control-border-color);
--form-select-border-radius: var(--border-radius);
--form-select-padding-y: var(--spacer-1);
--form-select-padding-x: var(--spacer-3);
--form-select-indicator-padding: var(--spacer-5);
--form-select-font-size: var(--font-size);
--form-select-font-weight: 400;
--form-select-disabled-text-color: var(--disabled-text-color);
--form-select-disabled-bg-color: var(--disabled-bg-color);
--form-select-disabled-border-color: var(--disabled-border-color);
--form-select-focus-border-color: var(--primary-hover);
--form-select-focus-outline-width: var(--focus-outline-width);
--form-select-focus-outline-style: var(--focus-outline-style);
--form-select-focus-outline-color: var(--focus-outline-color);
--form-select-focus-outline-offset: var(--focus-offset);
--form-select-transition-duration: var(--transition-duration);
--form-select-transition-easing: var(--transition-easing);