Added 13 Aug 2026

ocean-multi-combobox-12143

Ocean Multi Combobox

Forms & Validation

Ocean Multi Combobox

Chips, a typeahead and an option list in one control, the menu opening on `:focus-within` so it survives tabbing into the field.

Forms & Validationformcomboboxmultiselectchipsdropdownocean

lines of CSS: 107lines of CSS
dependencies: 0dependencies
browser, for years: Everybrowser, for years
motion only on interaction: Hovermotion only on interaction

Backdrop

Assignees

AW×PR×

Open a live copy in

Vue, Svelte, styled-components and Tailwind exports are part of Pro. HTML, CSS and React are free forever.

ocean-multi-combobox-12143.css

.fx-v8-form-combo-ocean-12142 {
  position: relative;
  width: 280px;
}
.fx-v8-form-combo-ocean-12142 label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #cbd5e1;
}
.fx-v8-form-combo-ocean-12142 .field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1.8rem 0.45rem 0.5rem;
  border: 1px solid #334155;
  border-radius: 0.5rem;
  background: #111827;
  cursor: text;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.fx-v8-form-combo-ocean-12142:hover .field { border-color: #475569; }
.fx-v8-form-combo-ocean-12142 .field:focus-within {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233, 0.16);
}
.fx-v8-form-combo-ocean-12142 .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.14rem 0.28rem 0.14rem 0.45rem;
  border-radius: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #0b1120;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
}
.fx-v8-form-combo-ocean-12142 .chip b {
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 0.15rem;
  cursor: pointer;
  background: rgba(11,17,32,0.2);
}
.fx-v8-form-combo-ocean-12142 input {
  flex: 1;
  min-width: 60px;
  border: none;
  outline: none;
  background: transparent;
  color: #e2e8f0;
  font-size: 0.78rem;
}
.fx-v8-form-combo-ocean-12142 .field > i {
  position: absolute;
  right: 0.65rem;
  top: 2.05rem;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #475569;
}
.fx-v8-form-combo-ocean-12142 .menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0.3rem;
  padding: 0.25rem;
  border-radius: 0.45rem;
  background: #0f172a;
  border: 1px solid #1f2937;
  box-shadow: 0 14px 32px rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.fx-v8-form-combo-ocean-12142:focus-within .menu,
.fx-v8-form-combo-ocean-12142:hover .menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.fx-v8-form-combo-ocean-12142 .menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.45rem;
  border-radius: 0.3rem;
  font-size: 0.76rem;
  color: #cbd5e1;
  text-decoration: none;
  transition: background 0.14s ease;
}
.fx-v8-form-combo-ocean-12142 .menu a:hover { background: rgba(14,165,233, 0.14); }
.fx-v8-form-combo-ocean-12142 u {
  width: 15px;
  height: 15px;
  border: 1.5px solid #475569;
  border-radius: 0.22rem;
}

ocean-multi-combobox-12143.html

<div class="fx-v8-form-combo-ocean-12142">
  <label>Assignees</label>
  <div class="field">
    <span class="chip">AW<b>×</b></span>
    <span class="chip">PR<b>×</b></span>
    <input placeholder="Add…" readonly />
    <i></i>
  </div>
  <div class="menu">
    <a href="#"><u></u>Jonas Krieg</a>
    <a href="#"><u></u>Mira Osei</a>
    <a href="#"><u></u>Tom Byrne</a>
  </div>
</div>

What do I do with this?

Put ocean-multi-combobox-12143.css anywhere your page already loads CSS from — in Next.js that is app/globals.css, or any stylesheet with a <link> in your HTML.
Then put the class on the element you want it on: <button class="fx-v8-form-combo-ocean-12142">. The CSS does nothing until a class name in it matches something on the page.

Link the stylesheet, then paste the markup wherever you need it.

npx hoverlab add ocean-multi-combobox-12143

What's included

The markup and the stylesheet, in whichever framework you pick
No runtime dependencies

Works with

React
Vue
Svelte
Tailwind
styled-components
Plain CSS

npx hoverlab add ocean-multi-combobox-12143

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Motion safety

Static estimate, read from the CSS

Reduced motion: Brief motion, no guard
Animates briefly or on interaction. Only looping motion gets a guard in this catalog; copy the one from the Insights tab if this ships on a critical path.
What it animates: Repaints
Animates background, border-color, box-shadow, visibility. No reflow, but the browser repaints every frame, which is fine for one element and costly across many.
Flashing (WCAG 2.3.1): No flashing found
No repeating change in opacity, colour or brightness large enough to count as a flash.
Layout shift (CLS): No shift expected
Nothing it animates moves or resizes the box in flow. A category from the CSS, not a measurement for this effect.

Every row is read from the shipped CSS. Only a figure marked measured came from a browser. Customizing the speed changes the timing, so recheck a customized copy. How it is computed

33 more effects in Forms & Validation

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Forms & Validation

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

What's included

Copy-ready HTML and CSS — 107 lines, no build step
7 export formats — HTML, CSS, React, Vue, Svelte, styled-components, Tailwind
Live customization for hue, saturation, scale and speed
Editable in the playground

npx hoverlab add ocean-multi-combobox-12143
writes it into your project
npx hoverlab dna ocean-multi-combobox-12143
hands it to your agent

Licence

Free to copy and use in personal and non-commercial projects, in as many as you like, with no attribution. Shipping it in client work or a paid product needs Pro ($79 once). Read the licence.

Works with

FrameworksPlain HTMLReactVueSvelteTailwindstyled-components

AgentsCLIMCPFigma

Where this fits

Full sections that use this kind of element.

Split Contact FormContact & Forms
A contact form beside the channels that bypass it — a real address, a support link and a response-time promise, which is what makes a form people cannot see into feel worth filling.
Email & Social Login CardAuthentication
Centred sign-in card with social providers, a password reveal toggle and the autoComplete values password managers actually need.
Drag & Drop UploadFile Upload
Dropzone with per-file progress and a drag counter that fixes the flicker every naive dragleave handler produces.

Browse all blocks

Similar effects

Forms & Validation

Email me product updates
Blue Tick Checkbox
Custom checkbox that springs a white tick into a blue box, with a real focus ring.
MonthlyYearly
Blue Ring Radio Group
Radio group whose selected dot pops into a blue ring — no JavaScript, pure :checked.
Ocean Chevron Select
Native select with the OS arrow stripped and an ocean chevron that nudges down on hover.
Drop your file hereor click to browse — PNG, SVG up to 5 MB
Ocean File Drop Zone
Dashed upload target that tints ocean and spins its plus badge when you hover it.
Ocean OTP Code Input
Six-box verification code field with an ocean caret and a lift on the focused digit.
Looks goodEnter a full email address
Ocean Validation States
Paired valid / invalid fields with inline messages, glyphs and matching focus rings in ocean.

Browse all forms & validation

7 variations of Ocean Multi Combobox

Finished looks, each one a position in the customizer above. Copy any of them, or open it and keep moving the sliders.

Marigold
warm
by Hoverlab
The furthest warm rotation, held at a strong saturation.
Open
Brutal
signature
by Hoverlab
Almost colourless, considerably larger, deliberately slow.
Open
Voltage
electric
by Hoverlab
A small rotation and a large amount of saturation.
Open
Linen
muted
by Hoverlab
Drops the saturation most of the way without touching hue.
Open
Brisk
tempo
by Hoverlab
A quarter quicker, which is often what a hover state wants.
Open
Roomy
proportion
by Hoverlab
A quarter larger, for a surface with space to spare.
Open
Nocturne
cool
by Hoverlab
A short cool rotation with the intensity pushed hard.
Open

Ocean Multi Combobox

What do I do with this?

What's included

Works with

License

Motion safety

33 more effects in Forms & Validation

Shipping one commercially

7 variations of Ocean Multi Combobox

Marigold

Brutal

Voltage

Linen

Brisk

Roomy

Nocturne