Select Field

The select field (dropdown) lets users choose one option from a predefined list.

When to use

Single selection from many options (5+)
Standardized responses (countries, categories, departments)
When space is limited
When options should be hidden until needed

For fewer visible options, consider Radio instead.

Settings

Label

Example: "Country", "Department", "How did you hear about us?"

Placeholder

First option text (not selectable):

Example: "Select an option...", "Choose a country..."

Description

Help text if needed.

Required

Make selection mandatory.

Options

Define the choices available in the dropdown.

Adding options

Click Add Option or type in the options editor:

Option 1
Option 2
Option 3

Each line becomes one option.

Value vs. label

By default, the option text is both displayed and stored. For different stored values:

us|United States
uk|United Kingdom
ca|Canada

Format: value|label

Value: What's stored and sent (e.g., "us")
Label: What users see (e.g., "United States")

Option groups

Organize options with headings using ---:

---North America---
us|United States
ca|Canada
mx|Mexico
---Europe---
uk|United Kingdom
de|Germany
fr|France

Renders as:

<optgroup label="North America">
  <option value="us">United States</option>
  ...
</optgroup>

Bulk import

For long lists, paste from spreadsheet or use presets.

Built-in presets:

Countries (250+ countries)
US States
Canadian Provinces
Days of Week
Months

Default value

Pre-select an option:

Default Value: us

Must match the option value, not label.

Examples

Country selector

Label: Country
Placeholder: Select your country
Required: Yes
Options: [Countries preset]
Default Value: us

Department contact

Label: Department
Placeholder: Select a department
Required: Yes
Options:
  sales|Sales
  support|Customer Support
  billing|Billing
  other|Other

Source tracking

Label: How did you hear about us?
Placeholder: Please select...
Required: No
Options:
  google|Google Search
  social|Social Media
  friend|Friend/Colleague
  ad|Advertisement
  other|Other

Styling

<div class="fodo-field fodo-field-select">
  <label class="fodo-label" for="field_abc123">
    Country
    <span class="fodo-required">*</span>
  </label>
  <select
    id="field_abc123"
    name="fields[abc123]"
    class="fodo-input fodo-input-select"
    required
  >
    <option value="" disabled selected>Select your country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    ...
  </select>
</div>

Custom styling

The native <select> element has limited styling. For full control:

Add a CSS class to the field
Use CSS to style the wrapper
Or use JavaScript to create a custom dropdown

.fodo-field-select .fodo-input-select {
  appearance: none;
  background-image: url('data:image/svg+xml,...'); /* custom arrow */
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

Searchable select (Pro)

For long lists, enable searchable mode:

Users can type to filter options
Improved UX for country/state selectors
Keyboard navigation support

Select Field

On this page