AccordionOptions

icon

Element

store

DisclosureStore

title

enum

ActiveBarOptions

activeTab

HTMLElement

listRef

MutableRefObject<undefined>

AlertOptions

closeButtonDataTestId

string

@description add a close button with an onclick handleClose function

handleClose

() => void

isFullWidth

size

variant

AspectRatioOptions

ratio

number

AvatarOptions

color

getInitials

(name: string) => string

name

ShapeOptions

shape

ListOptions

emojis

Emoji[]

emptyList

inputSearchPlaceholder

isOpen

onChange

(value: string) => void

value

DisclosureStoreOptions

Determines whether the content should animate when it is shown or hidden.
- If `true`, the `animating` state will be `true` when the content is shown
  or hidden and it will wait for a CSS animation/transition to end before
  becoming `false`.
- If it's set to a number, the `animating` state will be `true` when the
  content is shown or hidden and it will wait for the number of
  milliseconds to pass before becoming `false`.
@deprecated Manually setting the `animated` prop is no longer necessary.
This will be removed in a future release.

animated

Whether the content should be visible by default.

defaultOpen

A reference to another disclosure store that controls another disclosure
component to keep them in sync. Element states like `contentElement` and
`disclosureElement` won't be synced. For that, use the
[`store`](https://ariakit.org/reference/disclosure-provider#store) prop
instead.

Live examples:
- [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)

disclosure

A callback that gets called when the `mounted` state changes.
@example const [mounted, setMounted] = useState(false);
const disclosure = useDisclosureStore({ setMounted });

setMounted

(mounted: boolean) => void

A callback that gets called when the
[`open`](https://ariakit.org/reference/disclosure-provider#open) state
changes.
@example const [open, setOpen] = useState(false);
const disclosure = useDisclosureStore({ open, setOpen });

setOpen

(open: boolean) => void

ItemOptions

isActive

separator

ButtonOptions

disabled

ButtonGroupOptions

CoverOptions

CheckboxOptions

Component

checked

TypeLiteral

hasIcon

iconPlacement

indeterminate

isClearable

(event: ChangeEvent<HTMLInputElement>) => void

transparent

ContentOptions

onClose

CustomHeaderOptions

endYear

ReactDatePickerProps

CustomInputOptions

DatePickerOptions

onBlur

(event: FocusEvent<HTMLDivElement, Element>) => void

(date?: Date) => void

onFocus

placeholder

preventVirtualKeyboard

startYear

useWeekdaysShort

Enables basic storage and retrieval of dates and times.

TimePickerOptions

((date?: Date) => void) & ((date?: Date) => void)

FocusableOptions

Indicates whether the element should be focusable even when it is
[`disabled`](https://ariakit.org/reference/focusable#disabled).

This is important when discoverability is a concern. For example:

> A toolbar in an editor contains a set of special smart paste functions
that are disabled when the clipboard is empty or when the function is not
applicable to the current content of the clipboard. It could be helpful to
keep the disabled buttons focusable if the ability to discover their
functionality is primarily via their presence on the toolbar.

Learn more on [Focusability of disabled
controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).

Live examples:
- [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)

accessibleWhenDisabled

DisclosureContentOptions

Determines whether the content element should remain visible even when the
[`open`](https://ariakit.org/reference/disclosure-provider#open) state is
`false`. If this prop is set to `true`, the `hidden` prop and the `display:
none` style will not be applied, unless explicitly set otherwise.

This prop is particularly useful when using third-party animation libraries
such as Framer Motion or React Spring, where the element needs to be
visible for exit animations to work.

Live examples:
- [Dialog with Framer
  Motion](https://ariakit.org/examples/dialog-framer-motion)
- [Menu with Framer
  Motion](https://ariakit.org/examples/menu-framer-motion)
- [Tooltip with Framer
  Motion](https://ariakit.org/examples/tooltip-framer-motion)
- [Dialog with details &
  summary](https://ariakit.org/examples/dialog-details)

alwaysVisible

Automatically focuses the element upon mounting, similar to the native
`autoFocus` prop. This addresses an issue where the element with the native
`autoFocus` attribute might receive focus before React effects are
executed.

The `autoFocus` prop can also be used with
[Focusable](https://ariakit.org/components/focusable) elements within a
[Dialog](https://ariakit.org/components/dialog) component, establishing the
initial focus as the dialog opens.

**Note**: For this prop to work, the
[`focusable`](https://ariakit.org/reference/command#focusable) prop must be
set to `true`, if it's not set by default.

Live examples:
- [Warning on Dialog
  hide](https://ariakit.org/examples/dialog-hide-warning)
- [Dialog with React
  Router](https://ariakit.org/examples/dialog-react-router)
- [Nested Dialog](https://ariakit.org/examples/dialog-nested)

autoFocus

DialogOptions

Determines whether an element outside of the dialog will be focused when
the dialog is hidden if another element hasn't been focused in the action
of hiding the dialog (for example, by clicking or tabbing into another
tabbable element outside of the dialog).

By default, this is usually the disclosure element. The
[`finalFocus`](https://ariakit.org/reference/dialog#finalfocus) prop can be
used to define a different element to be focused.

Live examples:
- [Dialog with Next.js App
  Router](https://ariakit.org/examples/dialog-next-router)
- [Sliding menu](https://ariakit.org/examples/menu-slide)

autoFocusOnHide

Determines whether an element inside the dialog will receive focus when the
dialog is shown. By default, this is usually the first tabbable element in
the dialog or the dialog itself. The
[`initialFocus`](https://ariakit.org/reference/dialog#initialfocus) prop
can be used to set a different element to receive focus.

Live examples:
- [Warning on Dialog
  hide](https://ariakit.org/examples/dialog-hide-warning)
- [Sliding Menu](https://ariakit.org/examples/menu-slide)
- [Selection Popover](https://ariakit.org/examples/popover-selection)

autoFocusOnShow

Determines whether there will be a backdrop behind the dialog. On modal
dialogs, this is `true` by default. Besides a `boolean`, this prop can also
be a React component or JSX element that will be rendered as the backdrop.

**Note**: If a custom component is used, it must [accept ref and spread all
props to its underlying DOM
element](https://ariakit.org/guide/composition#custom-components-must-be-open-for-extension),
the same way a native element would.

Live examples:
- [Animated Dialog](https://ariakit.org/examples/dialog-animated)
- [Dialog with scrollable
  backdrop](https://ariakit.org/examples/dialog-backdrop-scrollable)
- [Dialog with Framer
  Motion](https://ariakit.org/examples/dialog-framer-motion)
- [Dialog with Menu](https://ariakit.org/examples/dialog-menu)
- [Nested Dialog](https://ariakit.org/examples/dialog-nested)
- [Dialog with Next.js App
  Router](https://ariakit.org/examples/dialog-next-router)
@example ```jsx
<Dialog backdrop={<div className="backdrop" />} />
```

backdrop

Determines if the element is disabled. This sets the `aria-disabled`
attribute accordingly, enabling support for all elements, including those
that don't support the native `disabled` attribute.

This feature can be combined with the
[`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled)
prop to make disabled elements still accessible via keyboard.

**Note**: For this prop to work, the
[`focusable`](https://ariakit.org/reference/command#focusable) prop must be
set to `true`, if it's not set by default.

Live examples:
- [Submenu](https://ariakit.org/examples/menu-nested)
- [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
- [Context Menu](https://ariakit.org/examples/menu-context-menu)

Determines the element that will receive focus once the dialog is closed,
provided that no other element has been focused while the dialog was being
hidden (e.g., by clicking or tabbing into another tabbable element outside
of the dialog).
- If
  [`autoFocusOnHide`](https://ariakit.org/reference/dialog#autofocusonhide)
  is set to `false`, this prop will have no effect.
- If left unset, the element that was focused before the dialog was opened
  will be focused again.

finalFocus

Any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.

Determines if [Focusable](https://ariakit.org/components/focusable)
features should be active on non-native focusable elements.

**Note**: This prop only turns off the additional features provided by the
[`Focusable`](https://ariakit.org/reference/focusable) component.
Non-native focusable elements will lose their focusability entirely.
However, native focusable elements will retain their inherent focusability,
but without added features such as improved
[`autoFocus`](https://ariakit.org/reference/focusable#autofocus),
[`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled),
[`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible),
etc.

focusable

When a dialog is open, the elements outside of it are disabled to prevent
interaction if the dialog is
[`modal`](https://ariakit.org/reference/dialog#modal). For non-modal
dialogs, interacting with elements outside the dialog prompts it to close.

This function allows you to return an iterable collection of elements that
will be considered as part of the dialog, thus excluding them from this
behavior.

**Note**: The elements returned by this function must exist in the DOM when
the dialog opens.

Live examples:
- [Dialog with
  React-Toastify](https://ariakit.org/examples/dialog-react-toastify)

getPersistentElements

() => Iterable<Element>

Determines if the dialog will hide when the user presses the Escape key.

This prop can be either a boolean or a function that accepts an event as an
argument and returns a boolean. The event object represents the keydown
event that initiated the hide action, which could be either a native
keyboard event or a React synthetic event.

**Note**: When placing Ariakit dialogs inside third-party dialogs, using
`event.stopPropagation()` within this function will stop the event from
reaching the third-party dialog, closing only the Ariakit dialog.

hideOnEscape

Determines if the dialog should hide when the user clicks or focuses on an
element outside the dialog.

This prop can be either a boolean or a function that takes an event as an
argument and returns a boolean. The event object represents the event that
triggered the action, which could be a native event or a React synthetic
event of various types.

Live examples:
- [Selection Popover](https://ariakit.org/examples/popover-selection)

hideOnInteractOutside

Specifies the element that will receive focus when the dialog is first
opened. It can be an `HTMLElement` or a `React.RefObject` with an
`HTMLElement`.

If
[`autoFocusOnShow`](https://ariakit.org/reference/dialog#autofocusonshow)
is set to `false`, this prop will have no effect. If left unset, the dialog
will attempt to determine the initial focus element in the following order:
1. A [Focusable](https://ariakit.org/components/focusable) element with an
   [`autoFocus`](https://ariakit.org/reference/focusable#autofocus) prop.
2. The first tabbable element inside the dialog.
3. The first focusable element inside the dialog.
4. The dialog element itself.

initialFocus

Determines whether the dialog is modal. Modal dialogs have distinct states
and behaviors:
- The [`portal`](https://ariakit.org/reference/dialog#portal) and
  [`preventBodyScroll`](https://ariakit.org/reference/dialog#preventbodyscroll)
  props are set to `true`. They can still be manually set to `false`.
- When using the [`Heading`](https://ariakit.org/reference/heading) or
  [`DialogHeading`](https://ariakit.org/reference/dialog-heading)
  components within the dialog, their level will be reset so they start
  with `h1`.
- A visually hidden dismiss button will be rendered if the
  [`DialogDismiss`](https://ariakit.org/reference/dialog-dismiss) component
  hasn't been used. This allows screen reader users to close the dialog.
- When the dialog is open, element tree outside it will be inert.

Live examples:
- [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
- [Dialog with details &
  summary](https://ariakit.org/examples/dialog-details)
- [Form with Select](https://ariakit.org/examples/form-select)
- [Context menu](https://ariakit.org/examples/menu-context-menu)
- [Responsive Popover](https://ariakit.org/examples/popover-responsive)

modal

This is an event handler prop triggered when the dialog's `close` event is
dispatched. The `close` event is similar to the native dialog
[`close`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event)
event. The only difference is that this event can be canceled with
`event.preventDefault()`, which will prevent the dialog from hiding.

It's important to note that this event only fires when the dialog store's
[`open`](https://ariakit.org/reference/use-dialog-store#open) state is set
to `false`. If the controlled
[`open`](https://ariakit.org/reference/dialog#open) prop value changes, or
if the dialog's visibility is altered in any other way (such as unmounting
the dialog without adjusting the open state), this event won't be
triggered.

Live examples:
- [Dialog with scrollable
  backdrop](https://ariakit.org/examples/dialog-backdrop-scrollable)
- [Dialog with details &
  summary](https://ariakit.org/examples/dialog-details)
- [Warning on Dialog
  hide](https://ariakit.org/examples/dialog-hide-warning)
- [Dialog with Menu](https://ariakit.org/examples/dialog-menu)

(event: Event) => void

Custom event handler invoked when the element gains focus through keyboard
interaction or a key press occurs while the element is in focus. This is
the programmatic equivalent of the
[`data-focus-visible`](https://ariakit.org/guide/styling#data-focus-visible)
attribute.

**Note**: For this prop to work, the
[`focusable`](https://ariakit.org/reference/command#focusable) prop must be
set to `true`, if it's not set by default.

Live examples:
- [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
- [Custom Checkbox](https://ariakit.org/examples/checkbox-custom)

onFocusVisible

BivariantCallback<(event: SyntheticEvent<HTMLElement, Event>) => void>

Controls the open state of the dialog. This is similar to the
[`open`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/open)
attribute on native dialog elements.

Live examples:
- [Dialog with scrollable
  backdrop](https://ariakit.org/examples/dialog-backdrop-scrollable)
- [Dialog with details &
  summary](https://ariakit.org/examples/dialog-details)
- [Warning on Dialog
  hide](https://ariakit.org/examples/dialog-hide-warning)
- [Dialog with Menu](https://ariakit.org/examples/dialog-menu)

open

DrawerOptions

placement

PortalOptions

Determines whether the element should be rendered as a React Portal.

Live examples:
- [Combobox with integrated
  filter](https://ariakit.org/examples/combobox-filtering-integrated)
- [Dialog with Menu](https://ariakit.org/examples/dialog-menu)
- [Hovercard with keyboard
  support](https://ariakit.org/examples/hovercard-disclosure)
- [Menubar](https://ariakit.org/components/menubar)
- [Standalone Popover](https://ariakit.org/examples/popover-standalone)
- [Animated Select](https://ariakit.org/examples/select-animated)

portal

An HTML element or a memoized callback function that returns an HTML
element to be used as the portal element. By default, the portal element
will be a `div` element appended to the `document.body`.

Live examples:
- [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
@example ```jsx
const [portal, setPortal] = useState(null);

<Portal portalElement={portal} />
<div ref={setPortal} />
```
@example ```jsx
const getPortalElement = useCallback(() => {
  const div = document.createElement("div");
  const portalRoot = document.getElementById("portal-root");
  portalRoot.appendChild(div);
  return div;
}, []);

<Portal portalElement={getPortalElement} />
```

portalElement

`portalRef` is similar to `ref` but is scoped to the portal node. It's
useful when you need to be informed when the portal element is appended to
the DOM or removed from the DOM.

Live examples:
- [Form with Select](https://ariakit.org/examples/form-select)
@example ```jsx
const [portalElement, setPortalElement] = useState(null);

<Portal portalRef={setPortalElement} />
```

portalRef

When enabled, `preserveTabOrder` will keep the DOM element's tab order the
same as the order in which the underlying
[`Portal`](https://ariakit.org/reference/portal) component was mounted in
the React tree.

If the
[`preserveTabOrderAnchor`](https://ariakit.org/reference/portal#preservetaborderanchor)
prop is provided, the tab order will be preserved relative to that element.

preserveTabOrder

An anchor element for maintaining the tab order when
[`preserveTabOrder`](https://ariakit.org/reference/portal#preservetaborder)
prop is enabled. The tab order will be kept relative to this element.

By default, the tab order is kept relative to the original location in the
React tree where the underlying
[`Portal`](https://ariakit.org/reference/portal) component was mounted.
@example ```jsx {18-20}
const [anchor, setAnchor] = useState(null);

<button ref={setAnchor}>Order 0</button>
<button>Order 2</button>

// Rendered at the end of the document.
<Portal>
  <button>Order 5</button>
</Portal>

// Rendered at the end of the document, but the tab order is preserved.
<Portal preserveTabOrder>
  <button>Order 3</button>
</Portal>

// Rendered at the end of the document, but the tab order is preserved
// relative to the anchor element.
<Portal preserveTabOrder preserveTabOrderAnchor={anchor}>
  <button>Order 1</button>
</Portal>

<button>Order 4</button>
```

preserveTabOrderAnchor

Determines whether the body scrolling will be prevented when the dialog is
shown. This is automatically set to `true` when the dialog is
[`modal`](https://ariakit.org/reference/dialog#modal). You can disable this
prop if you want to implement your own logic.

preventBodyScroll

Options

Allows the component to be rendered as a different HTML element or React
component. The value can be a React element or a function that takes in the
original component props and gives back a React element with the props
merged.

Check out the [Composition](https://ariakit.org/guide/composition) guide
for more details.

render

Object returned by the
[`useDialogStore`](https://ariakit.org/reference/use-dialog-store) hook. If
not provided, the closest
[`DialogProvider`](https://ariakit.org/reference/dialog-provider)
component's context will be used. Otherwise, an internal store will be
created.

DialogStore

When set to `true`, the content element will be unmounted and removed from
the DOM when it's hidden.

Live examples:
- [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
- [Combobox with integrated
  filter](https://ariakit.org/examples/combobox-filtering-integrated)
- [Textarea with inline
  Combobox](https://ariakit.org/examples/combobox-textarea)
- [Standalone Popover](https://ariakit.org/examples/popover-standalone)
- [Animated Select](https://ariakit.org/examples/select-animated)
- [Multi-Select](https://ariakit.org/examples/select-multiple)

unmountOnHide

withBackdrop

withCloseButton

wrapElement

WrapElement

DrawerBackdropOptions

PopoverOptions

The minimum padding between the arrow and the popover corner.

arrowPadding

CompositeOptions

Determines if the component should act as a composite widget. This prop
needs to be set to `false` when merging various composite widgets where
only one should function in that manner.

If disabled, this component will stop managing focus and keyboard
navigation for its items and itself. Additionally, composite ARIA
attributes won't be applied. These responsibilities should be taken over by
another composite component.

**Note**: In most cases, this prop doesn't need to be set manually. For
example, when composing [Menu with
Combobox](https://ariakit.org/examples/menu-combobox) or [Select with
Combobox](https://ariakit.org/examples/select-combobox), this prop will be
set to `false` automatically on the
[`Menu`](https://ariakit.org/reference/menu) and
[`SelectPopover`](https://ariakit.org/reference/select-popover) components
so the [`Combobox`](https://ariakit.org/reference/combobox) component can
take over the composite widget responsibilities.

Live examples:
- [Menu with Combobox](https://ariakit.org/examples/menu-combobox)
- [Select with Combobox](https://ariakit.org/examples/select-combobox)

composite

HovercardOptions

Determines if the pointer events outside of the popover and its anchor
element should be disabled during _hover intent_, that is, when the mouse
is moving toward the popover.

This is required as these external events may trigger focus on other
elements and close the popover while the user is attempting to hover over
it.

This can be either a boolean or a callback receiving the mouse event
happening during hover intent. The callback should return a boolean.

disablePointerEventsOnApproach

Whether the popover should fit the viewport. If this is set to true, the
popover wrapper will have `maxWidth` and `maxHeight` set to the viewport
size. This will be exposed to CSS as
[`--popover-available-width`](https://ariakit.org/guide/styling#--popover-available-width)
and
[`--popover-available-height`](https://ariakit.org/guide/styling#--popover-available-height).

Live examples:
- [Textarea with inline
  Combobox](https://ariakit.org/examples/combobox-textarea)
- [Menubar](https://ariakit.org/components/menubar)

fitViewport

Whether the popover has `position: fixed` or not.

fixed

Controls the behavior of the popover when it overflows the viewport:
- If a `boolean`, specifies whether the popover should flip to the opposite
  side when it overflows.
- If a `string`, indicates the preferred fallback placements when it
  overflows. The placements must be spaced-delimited, e.g. "top left".

Live examples:
- [Sliding Menu](https://ariakit.org/examples/menu-slide)
- [Menubar](https://ariakit.org/components/menubar)

flip

Determines if the active composite item should receive focus (or virtual
focus if the
[`virtualFocus`](https://ariakit.org/reference/composite-provider#virtualfocus)
option is enabled) when moving through items. This typically happens when
navigating through items with arrow keys, but it can also happen when
calling the
[`move`](https://ariakit.org/reference/use-composite-store#move) method
directly.

Unlike the
[`composite`](https://ariakit.org/reference/composite#composite-1) prop,
this option doesn't disable the entire composite widget behavior. It only
stops this component from managing focus when navigating through items.

**Note**: If you want to control the behavior only _when arrow keys are
pressed_, use the
[`moveOnKeyPress`](https://ariakit.org/reference/composite#moveonkeypress)
prop instead.

focusOnMove

Determines if [Focusable](https://ariakit.org/components/focusable)
features should be active on non-native focusable elements.

**Note**: This prop only turns off the additional features provided by the
[`Focusable`](https://ariakit.org/reference/focusable) component.
Non-native focusable elements will lose their focusability entirely.
However, native focusable elements will retain their inherent focusability,
but without added features such as improved
[`autoFocus`](https://ariakit.org/reference/focusable#autofocus),
[`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled),
[`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible),
etc.
@see https://ariakit.org/reference/focusable

Function that returns the anchor element's DOMRect. If this is explicitly
passed, it will override the anchor `getBoundingClientRect` method.

Live examples:
 - [Textarea with inline combobox](https://ariakit.org/examples/combobox-textarea)
 - [Standalone Popover](https://ariakit.org/examples/popover-standalone)
 - [Context menu](https://ariakit.org/examples/menu-context-menu)
 - [Selection Popover](https://ariakit.org/examples/popover-selection)

getAnchorRect

(anchor: HTMLElement) => AnchorRect

DropdownMenuOptions

gutter

Determines whether the popover should hide when the mouse leaves the
popover or the anchor element and there's no _hover intent_, meaning, the
mouse isn't moving toward the popover.

This can be either a boolean or a callback receiving the mouse move event
that initiated the behavior. The callback should return a boolean.

**Note**: This behavior won't be triggered when the popover or any of its
descendants are in focus.

hideOnHoverOutside

add custom props from styled system on DropdownMenu inner

innerProps

WuiProps

Determines whether the composite widget should move focus to an item when
arrow keys are pressed, given that the composite element is focused and
there's no active item.

**Note**: To entirely disable focus moving within a composite widget, you
can use the
[`focusOnMove`](https://ariakit.org/reference/composite#focusonmove) prop
instead. If you want to control the behavior _only when arrow keys are
pressed_, where
[`focusOnMove`](https://ariakit.org/reference/composite#focusonmove) may
not be applicable, this prop must be set on composite items as well.
@example ```jsx
<Composite moveOnKeyPress={false}>
  <CompositeItem moveOnKeyPress={false} />
  <CompositeItem moveOnKeyPress={false} />
</Composite>
```

moveOnKeyPress

The minimum padding between the popover and the viewport edge. This will be
exposed to CSS as
[`--popover-overflow-padding`](https://ariakit.org/guide/styling#--popover-overflow-padding).

Live examples:
- [Sliding Menu](https://ariakit.org/examples/menu-slide)

overflowPadding

Whether the popover can overlap the anchor element when it overflows.

Live examples:
- [Menubar](https://ariakit.org/components/menubar)
- [Submenu with
  Combobox](https://ariakit.org/examples/menu-nested-combobox)

overlap

Whether the popover should have the same width as the anchor element. This
will be exposed to CSS as
[`--popover-anchor-width`](https://ariakit.org/guide/styling#--popover-anchor-width).

sameWidth

The skidding of the popover along the anchor element. Can be set to
negative values to make the popover shift to the opposite side.

Live examples:
- [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
- [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
- [Submenu](https://ariakit.org/examples/menu-nested)
- [Menubar](https://ariakit.org/components/menubar)

shift

Whether the popover should slide when it overflows.

slide

MenuListOptions

Object returned by the
[`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook. If not
provided, the closest
[`MenuProvider`](https://ariakit.org/reference/menu-provider) component's
context will be used.

MenuStore<MenuStoreValues>

CompositeTypeaheadOptions

When enabled, pressing printable character keys will move focus to the next
composite item that starts with the entered characters.

typeahead

A callback that will be called when the popover needs to calculate its
position. This will override the internal `updatePosition` function. The
original `updatePosition` function will be passed as an argument, so it can
be called inside the callback to apply the default behavior.

Live examples:
 - [Responsive Popover](https://ariakit.org/examples/popover-responsive)

InputText

Usage #

Label #

Hint #

Required #

Clearable #

Icon #

Sizes #

Variants #

Disabled #

Transparent #

Inline #

Properties #

Packages #

Dependencies #

Peer dependencies #

Name	Type(s)	Default
autoFocus	Boolean
disabled	Boolean
icon	Element
iconPlacement	"right" "left"	left
isClearable	Boolean
name	string
onBlur	(event: FocusEvent<HTMLInputElement, Element>) => void
onChange	(event: ChangeEvent<HTMLInputElement>) => void
onFocus	(event: FocusEvent<HTMLInputElement, Element>) => void
onKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void
placeholder	string
type	string	text
value	string
transparent	Boolean
size	"xs" "sm" "md" "lg"	md
variant	"error" "focused" "info" "success" "warning"
hasIcon	Boolean