Design Atlas
한국어
✧ AI interface patterns

Model picker

모델 선택기

A dropdown for choosing between models that trade off speed, quality, and cost, with each option briefly labeled.

Also known as: Model switcherModel dropdown
···
html
<div class="mp">
  <button class="trigger" id="trig"><span id="tname">Balanced</span><i class="chev">▾</i></button>
  <div class="menu" id="menu">
    <button class="opt" data-m="Fast"><span class="nm">Fast</span><span class="tag">빠름</span></button>
    <button class="opt" data-m="Balanced" data-sel><span class="nm">Balanced</span><span class="tag">균형</span></button>
    <button class="opt" data-m="Max"><span class="nm">Max</span><span class="tag">가장 정교함</span></button>
  </div>
</div>
css
.mp{position:relative;width:min(180px,80%)}
.trigger{width:100%;display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font-size:12px;font-weight:600;cursor:pointer}
.chev{font-style:normal;color:var(--muted);transition:transform .2s}
.menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 30px rgba(0,0,0,.2);
  display:grid;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .18s,transform .18s;overflow:hidden}
.menu[data-open]{opacity:1;transform:none}
.opt{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border:0;background:none;cursor:pointer;font-size:11.5px;color:var(--fg)}
.opt[data-sel]{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);font-weight:700}
.opt .tag{color:var(--muted);font-size:10px}
.opt[data-sel] .tag{color:var(--accent)}
js
const trig = document.getElementById('trig'), menu = document.getElementById('menu'), tname = document.getElementById('tname');
const opts = [...document.querySelectorAll('.opt')];
function select(name) {
  tname.textContent = name;
  opts.forEach((o) => o.toggleAttribute('data-sel', o.dataset.m === name));
}
function run() {
  menu.setAttribute('data-open', '');
  setTimeout(() => {
    const names = opts.map((o) => o.dataset.m);
    const cur = names.indexOf(tname.textContent);
    select(names[(cur + 1) % names.length]);
    setTimeout(() => menu.removeAttribute('data-open'), 500);
  }, 900);
}
setTimeout(run, 600);
setInterval(run, 3200);

When a product offers both a fast, lightweight model and a slower, more capable one, this picker lets the user choose which fits the task at hand. Each option pairs its name with a short descriptor — "Fast," "Smartest" — or a speed/quality bar, so someone can pick sensibly without knowing what the model names actually mean.

Like radio buttons, only one is selected at a time; picking one closes the dropdown and updates the trigger button's label. Switching models mid-conversation means later turns are answered by a different model than earlier ones, so some products mark that switch point in the conversation itself.

The default matters most — most people never touch the picker, so whatever model is preselected effectively determines the experience for the majority of users.

When to use

Use it where the speed/cost/quality tradeoff is genuinely meaningful to the user. Not needed at all if there is only one model.