Skip to component content

Native Select

Choose one value from native option menus in admin forms.

Use a native option menu when one value should be submitted.

Usage

Use .form-select when the user must choose one value from a finite list and native browser behavior is enough. Pair the control with a visible label, keep option values stable for form submission, and use a disabled placeholder option when no value has been chosen yet.

Use option groups only when they make a long list easier to scan. Keep labels short, avoid using select for huge searchable datasets, and prefer Combobox when filtering, async loading, or multi-selection is central to the workflow.

Set native state directly on the control: disabled when it is unavailable, multiple only when several values can be submitted, and invalid state when validation fails. Size variants such as .form-select-sm and .form-select-lg should match the density of the surrounding form.

Default

Use one native `form-select` control for direct queue routing.

Native Select 
<div class="field w-100">
  <select class="form-select" aria-label="Route queue">
    <option value="" selected disabled>Choose queue</option>
    <option value="ops">Operations</option>
    <option value="design">Design</option>
    <option value="analytics">Analytics</option>
    <option value="shipping">Shipping</option>
    <option value="docs">Documentation</option>
  </select>
</div>

Groups

Group related values with `optgroup` when a long list is still static.

Native Select 
<div class="field w-100">
  <select class="form-select" aria-label="Grouped queue options" data-selected="release">
    <optgroup label="Primary queues">
      <option value="deploy">Deployment</option>
      <option value="release" selected>Release</option>
      <option value="incident">Incident</option>
    </optgroup>
    <optgroup label="Secondary queues">
      <option value="internal">Internal</option>
      <option value="partner">Partner</option>
      <option value="open">Open</option>
    </optgroup>
    <optgroup label="Archive queues" disabled>
      <option value="legacy">Legacy</option>
      <option value="deprecated">Deprecated</option>
    </optgroup>
  </select>
</div>

Disabled

Keep the control visible and clear when route changes are temporarily blocked.

Native Select 
<div class="field w-100">
  <select class="form-select" aria-label="Disabled queue select" data-selected="critical" disabled>
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
    <option value="xlarge">Extra large</option>
    <option value="enterprise">Enterprise</option>
    <option value="critical" selected>Critical</option>
    <option value="urgent">Urgent</option>
    <option value="scheduled">Scheduled</option>
    <option value="on-call">On call</option>
    <option value="batch">Batch</option>
    <option value="async">Async</option>
  </select>
</div>

Invalid

Use `is-invalid` with helper/error messaging in the same control set.

Native Select
Select a queue so the action has a valid target.
Choose a valid queue before continuing.
<div class="field w-100" data-invalid="true">
  <label class="form-label" for="select-invalid-workspace">Route queue</label>
  <select class="form-select is-invalid" id="select-invalid-workspace" aria-describedby="select-invalid-workspace-help select-invalid-workspace-error" aria-invalid="true" required>
    <option value="" selected disabled>Choose a workspace</option>
    <option value="ops">Operations</option>
    <option value="design">Design</option>
    <option value="analytics">Analytics</option>
    <option value="shipping">Shipping</option>
    <option value="docs">Documentation</option>
  </select>
  <div class="field-description form-text" id="select-invalid-workspace-help">Select a queue so the action has a valid target.</div>
  <div class="field-error invalid-feedback" id="select-invalid-workspace-error">Choose a valid queue before continuing.</div>
</div>

Form rhythm

Use field grouping when multiple selects share one form decision.

Native Select
Delivery controls
Select the target queue for each environment.
Primary queue handles first pass routing.
Fallback queue starts after retries are exhausted.
<div class="vstack gap-2">
  <fieldset class="field-fieldset">
    <legend class="field-legend">Delivery controls</legend>
    <div class="field-description form-text">Select the target queue for each environment.</div>
    <div class="field-group">
      <div class="field">
        <label class="form-label" for="select-field-1">Primary queue</label>
        <select class="form-select" id="select-field-1" aria-describedby="select-field-1-help" data-selected="ops">
          <option value="" disabled>Choose queue</option>
          <option value="ops" selected>Operations</option>
          <option value="support">Support</option>
          <option value="finance">Finance</option>
        </select>
        <div class="field-description form-text" id="select-field-1-help">Primary queue handles first pass routing.</div>
      </div>
      <div class="field">
        <label class="form-label" for="select-field-2">Fallback queue</label>
        <select class="form-select" id="select-field-2" aria-describedby="select-field-2-help">
          <option value="" selected disabled>Choose queue</option>
          <option value="ops">Operations</option>
          <option value="support">Support</option>
          <option value="finance">Finance</option>
        </select>
        <div class="field-description form-text" id="select-field-2-help">Fallback queue starts after retries are exhausted.</div>
      </div>
    </div>
  </fieldset>
</div>

RTL

Use the same labeled select control across Arabic and Hebrew RTL examples, with English as the LTR comparison.

حدد مساحة العمل لتوجيه الإشعارات.
<div dir="rtl" class="d-grid gap-2 w-auto">
  <div class="field">
    <label class="form-label" for="select-rtl-arabic">مساحة العمل</label>
    <select class="form-select" id="select-rtl-arabic" aria-describedby="select-rtl-arabic-help" required dir="rtl">
      <option value="" selected disabled>اختر مساحة العمل</option>
      <option value="ops">العمليات</option>
      <option value="design">التصميم</option>
      <option value="analytics">التحليلات</option>
    </select>
    <div class="field-description form-text" id="select-rtl-arabic-help">حدد مساحة العمل لتوجيه الإشعارات.</div>
  </div>
</div>
בחר סביבת עבודה כדי להפנות התרעות.
<div dir="rtl" class="d-grid gap-2 w-auto">
  <div class="field">
    <label class="form-label" for="select-rtl-hebrew">סביבת עבודה</label>
    <select class="form-select" id="select-rtl-hebrew" aria-describedby="select-rtl-hebrew-help" required dir="rtl">
      <option value="" selected disabled>בחר סביבת עבודה</option>
      <option value="ops">תפעול</option>
      <option value="design">עיצוב</option>
      <option value="analytics">אנליטיקה</option>
    </select>
    <div class="field-description form-text" id="select-rtl-hebrew-help">בחר סביבת עבודה כדי להפנות התרעות.</div>
  </div>
</div>
Choose a workspace to route alerts.
<div dir="ltr" class="d-grid gap-2 w-auto">
  <div class="field">
    <label class="form-label" for="select-rtl-english">Workspace</label>
    <select class="form-select" id="select-rtl-english" aria-describedby="select-rtl-english-help" required dir="ltr">
      <option value="" selected disabled>Choose workspace</option>
      <option value="ops">Operations</option>
      <option value="design">Design</option>
      <option value="analytics">Analytics</option>
    </select>
    <div class="field-description form-text" id="select-rtl-english-help">Choose a workspace to route alerts.</div>
  </div>
</div>

Component reference

Status
Accepted
Runtime
native HTML/CSS
Markup
Bootstrap/native HTML
Reference

For native select constraints and browser behavior, see the Bootstrap Select documentation.

Pages
Home Introduction Installation Layout Examples Account Appearance FAQ Forgot Password Overview Pricing Profile Sign In Sign Up Tasks Users Components Blocks Charts Utilities Support & Evidence Contributing AI Usage Changelog License
Components
Accordion Alert Alert Dialog Avatar Badge Breadcrumb Button Button Group Card Chart Checkbox Close Button Collapsible Combobox Context Menu Data Table Date Picker Dialog Dropdown Menu Empty Field Form Input Input Group Kbd Menubar Native Select Navigation Pagination Popover Progress Radio Group Separator Sheet Sidebar Skeleton Slider Spinner Switch Table Table of Contents Tabs Textarea Toast Toggle Group Tooltip Typography
Utilities
Border Scroll Fade
Blocks
Accordion Panels Sidebar (Floating) Sidebar (Inset)
↵ Go to Page

Settings

Theme
Choose how Moo UI looks on this device.
Sidebar
Choose how the sidebar sits on the page.
Theme Builder
Tune catalog tokens and chart colors for this browser.
Base color
Theme color
Chart color
Heading font
Body font
Radius
Direction
Choose the reading direction. RTL flips the layout live.
Reset

Restore the default appearance.