Skip to content


autoPlacement() chooses the placement that has the most space available automatically.

You’ll want to use this instead of flip() if you don't want to give the floating element a “preferred” placement and let it choose a placement for you.

Scroll the container

In the above example, the automatic “most space” strategy is demonstrated (in contrast to flip’s preferred + fallback “no space” one).


import {computePosition, autoPlacement} from '@floating-ui/dom';
computePosition(referenceEl, floatingEl, {
  middleware: [autoPlacement()],

This cannot be used with flip().


These are the options you can pass to autoPlacement().

interface Options extends DetectOverflowOptions {
  alignment?: Alignment | null;
  autoAlignment?: boolean;
  allowedPlacements?: Array<Placement>;


default: null

Without options, autoPlacement() will choose any of the Side placements which fit best, i.e. 'top', 'right', 'bottom', or 'left'.

By specifying an alignment, it will choose those aligned placements.

  // top-start, right-start, bottom-start, left-start
  alignment: 'start',


default: true

When alignment is specified, this describes whether to automatically choose placements with the opposite alignment if they fit better.

  alignment: 'start',
  // Won't also choose 'end' alignments if those fit better
  autoAlignment: false,


default: computed subset of ALL_PLACEMENTS

Describes the placements which are allowed to be chosen.

  // 'right' and 'left' won't be chosen
  allowedPlacements: ['top', 'bottom'],


All of detectOverflow's options can be passed. For instance:

autoPlacement({padding: 5}); // 0 by default