Why does the dropdown need an API key?

It runs on your public key (developers may know it as a publishable key), the one starting with vdb_pk_. That key is built to be seen: you paste it straight into your pages, and all it can do is fill in makes and models. In Settings you can tie it to your own domains, so nobody can lift it and use it on their own site. Dropdown requests cost 0 credits, so the widget never spends your quota.

For JavaScript developers

The car make and model dropdown

A dependent make and model picker for any form: 14,069 vehicles across 858 makes. Cars, motorcycles, mopeds, vans, trucks and buses, reconciled from the official registers of 14 countries and refreshed monthly. Zero dependencies. One script tag. You can finally delete that makes array you have been maintaining by hand.

Make

Model

value: {"make":null,"model":null}

Live: the 40 most-registered makes. Type to search, pick a make, models follow.

Get your free API key

Your dropdown, live in 5 minutes. No card needed.

Playground

Kind Country searchable logos

The embed for what you just configured

The whole integration

1. One script tag (or npm install make-model-dropdown)

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

2. Two selects and one call

<select id="make"></select>
<select id="model"></select>

<script>
  VehiclesDropdown.attach({
    key: "vdb_pk_YOUR_KEY",
    make: "#make",
    model: "#model"
  })
</script>

Step 3 is the key: create a free public key, tie it to your domain, and ship. Dropdown requests cost 0 credits, so the widget never touches your quota.

Get your free API key

One widget, every vehicle kind

The same line of JavaScript is a car picker, a motorcycle picker or a truck picker. Pass kind: and the whole list narrows.

Cars 4,949 models

Every hatchback, wagon, SUV and roadster on real roads, popularity ordered so the Golf outranks the 412.

kind: "car"

Motorcycles 5,901 models

A motorbike make and model dropdown the way riders speak: displacement level names, CBR600RR rather than CBR.

kind: "motorcycle"

Trucks 914 models

Truck makes and models for fleet, logistics and marketplace forms: pickups, rigids and the giants of the motorway.

kind: "truck"

Vans 616 models

Campers, panel vans and people movers, the workhorses behind every trade and rental form.

kind: "van"

Mopeds 1,299 models

Scooters and the small machines that move whole cities.

kind: "moped"

Buses 390 models

Buses, coaches and minibuses for the biggest fleets of all.

kind: "bus"

What the data knows that a hardcoded list never will

Popularity that is real

Every model carries a decile from actual registration counts. order: "popular" puts what people drive first.

Country availability

country: "de" drops what Germany has never registered. Fourteen register countries, evidence based.

Make logos, safely

logos: true renders badges beside make names, with an automatic initial letter fallback when a marque has none.

Searchable

search: true swaps the select for an accessible combobox. Type gol, get the Golf.

Never a dead end

includeOther appends Other / not listed, and the resolve endpoint turns free text into canonical ids server side.

Fresh by construction

The dataset reships monthly from official registers. Your dropdown updates without a deploy on your side.

Works where your form lives

One widget, any stack. Pick yours.

One script tag, two selects, done. The form submits like any other.

<form method="post">
  <select id="make" name="make"></select>
  <select id="model" name="model"></select>
  <button>Get a quote</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
  VehiclesDropdown.attach({ key: "vdb_pk_YOUR_KEY", make: "#make", model: "#model" })
</script>

Attach on mount, destroy on unmount. The selects stay native.

import { useEffect, useRef } from "react"
import VehiclesDropdown from "make-model-dropdown"

function VehiclePicker() {
  const make = useRef(), model = useRef()
  useEffect(() => {
    const picker = VehiclesDropdown.attach({
      key: "vdb_pk_YOUR_KEY", make: make.current, model: model.current
    })
    return () => picker.destroy()
  }, [])
  return <><select ref={make} /><select ref={model} /></>
}

Same idea with template refs. Nothing in the widget is specific to any framework.

<script setup>
import { onMounted, onUnmounted, useTemplateRef } from "vue"
import VehiclesDropdown from "make-model-dropdown"

const make = useTemplateRef("make"), model = useTemplateRef("model")
let picker
onMounted(() => {
  picker = VehiclesDropdown.attach({
    key: "vdb_pk_YOUR_KEY", make: make.value, model: model.value
  })
})
onUnmounted(() => picker?.destroy())
</script>

<template><select ref="make" /><select ref="model" /></template>

Forms rendered on your server want the vehicles gem instead (github.com/vehiclesdb/vehicles): the same dataset, offline. The widget is its twin for the browser.

# Gemfile
gem "vehicles"

# A dependent picker with NO network calls: the same dataset ships
# inside the gem, offline, plus validators and popularity helpers.
form.select :make,  Vehicles.make_options
form.select :model, Vehicles.model_options(car.make)

The database underneath

14,069

models

858

makes

official registers

2026.08.1

dataset version

A model ships only when at least two independent official sources agree. Browse it all in the catalog, read the measured error rate, or go deeper with the full API: resolve free text to canonical ids, full spec records, imagery and license plate validation.

Questions developers ask

Yes. The identity layer (makes, models, kinds, slugs) is CC-BY 4.0: free for commercial use with visible credit, which the widget renders for you. The API key is free too.

Six kinds: cars, motorcycles (motorbikes), mopeds, vans, trucks and buses. Pass kind: "motorcycle" for a bike picker with displacement level names, or kind: "truck" for a commercial vehicle picker. Same widget, same one line.

Official vehicle registers of 14 countries, reconciled: a model ships only when at least two independent sources agree. Popularity comes from real registration counts, refreshed monthly.

Yes. The widget enhances native select elements, so your form submits the same values with or without it. Attach it from any framework, or use no framework at all.

Turn on includeOther and the picker appends an Other / not listed option, so your form never reaches a dead end. You can also send free text to the resolve endpoint from your own server.

Ship the dropdown today

A free public key, safe in your page source and tied to your own domains. Dropdown requests cost 0 credits. Your account comes with a private key too, for the day you want the rest of the VehiclesDB API.

Get your free API key Read the API docs