# Autocomplete Adapters
> Using the slotsmith Autocomplete with shadcn/ui, MUI, Chakra, Ant Design and Radix Themes.
## shadcn/ui
This adapter renders `Autocomplete` with shadcn/ui parts. Copy the file into your app and pass the map to `components`; every slot you leave out keeps its fallback.
```tsx
/**
* Autocomplete for shadcn/ui
*
* A `components` map that renders the slotsmith autocomplete with shadcn/ui
* primitives, written for shadcn/ui on Tailwind CSS v4. Copy the file, keep
* the parts you want, and pass the map as `components={shadcnComponents}`;
* every slot left out keeps its fallback.
*
* The `@/components/ui/*` and `@/lib/utils` imports are the app's own
* shadcn/ui files.
*/
import { useMemo, type RefObject } from "react";
import type {
AutocompleteCheckSlotProps,
AutocompleteClearSlotProps,
AutocompleteComponents,
AutocompleteCreateSlotProps,
AutocompleteEmptySlotProps,
AutocompleteErrorSlotProps,
AutocompleteGroupLabelSlotProps,
AutocompleteGroupSlotProps,
AutocompleteIndicatorSlotProps,
AutocompleteListSlotProps,
AutocompleteLoadMoreSlotProps,
AutocompleteLoadingSlotProps,
AutocompleteOptionLabelSlotProps,
AutocompleteOptionSlotProps,
AutocompletePopupSlotProps,
AutocompleteRootSlotProps,
AutocompleteSearchSlotProps,
AutocompleteSeparatorSlotProps,
AutocompleteTagSlotProps,
AutocompleteToggleSlotProps,
AutocompleteTriggerInputSlotProps,
AutocompleteTriggerSlotProps,
AutocompleteValueSlotProps,
} from "slotsmith/autocomplete";
import { useAutocompleteContext } from "slotsmith/autocomplete";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover";
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";
/** Stands in for `lucide-react`'s ChevronDown icon. */
const ChevronDown = () => (
);
/** Stands in for `lucide-react`'s Check icon. */
const Check = () => (
);
/** Stands in for `lucide-react`'s X icon: 12px in a badge, 16px like the chevron where it clears. */
const X = ({ className = "size-3" }: { className?: string }) => (
);
/** Stands in for `lucide-react`'s Search icon. */
const SearchIcon = () => (
);
/** Stands in for `lucide-react`'s LoaderCircle icon. */
const Loader = () => (
);
/**
* Shadcn root
*
* The positioning context the popup is measured against. It also lays out
* what no slot renders, so the field holds together without slotsmith's
* stylesheet: the row of tags and the text field, and the announcement,
* which only assistive technology hears. Tailwind reads `_` in a selector as
* a space, so the class names' own underscores are escaped, in `String.raw`
* so the backslash stays.
*/
const ShadcnRoot = ({ className, ...props }: AutocompleteRootSlotProps) => (
);
/**
* Shadcn trigger
*
* shadcn's `InputGroup`: the field frame, with its border, ring and
* destructive state. As a select it is the combobox itself, a frame rather
* than a `Button` because it holds the clear button and a button cannot hold
* another; its ring follows its own focus and the open list. With the search
* in the trigger it holds the `InputGroupInput`, draws the ring off it, and
* grows to wrap the badges: its 3px block padding around the 28px input keeps
* it at the `h-9` of a plain `InputGroup` while it holds one row.
*/
function ShadcnTrigger({ className, ...props }: AutocompleteTriggerSlotProps) {
const searchIn = (props as Record)["data-search-in"] !== undefined;
return (
);
}
/**
* Shadcn trigger input
*
* The `InputGroupInput` that is the combobox when the search is in the
* trigger. It takes the space the badges leave and wraps below them when
* that is too little. It sits in the part's body beside the badges rather
* than directly in the group, so the group's own `[&>input]` padding rules
* never reach it; its `px-2` stands in for them.
*/
const ShadcnTriggerInput = ({ className, ...props }: AutocompleteTriggerInputSlotProps) => (
);
/**
* Shadcn toggle
*
* A 28px icon `InputGroupButton` in the inline-end `InputGroupAddon`,
* holding the chevron. It stays out of the tab order and never takes focus
* from the input. The addon's own inline-end padding and pull are physical
* (right-hand) upstream, so they are cleared and the field's `px-1` insets
* it instead, the same on either side in a right-to-left layout.
*/
const ShadcnToggle = ({ className, ...props }: AutocompleteToggleSlotProps) => (
);
/**
* Shadcn value
*
* The selected label, muted while it is the placeholder.
*/
const ShadcnValue = ({ label, placeholder, empty }: AutocompleteValueSlotProps) => (
{empty ? placeholder : label}
);
/**
* Shadcn tag
*
* A secondary `Badge` per selected value, with a 20px ghost `Button`
* for removing it in the muted foreground.
*/
const ShadcnTag = ({ label, onRemove, removeLabel, disabled }: AutocompleteTagSlotProps) => (
{label}
{!disabled && (
)}
);
/**
* Shadcn clear
*
* A ghost icon `Button` in the muted foreground, like the chevron beside it.
* The click is stopped so it does not also reach the trigger and reopen the
* popup.
*
* shadcn's `Button` sets no `type`, so inside a form it would submit it;
* this and every other `Button` here passes `type="button"`.
*
* With the search in the trigger it is an icon `InputGroupButton` placed
* straight in the group, so the group's `gap-1` is all that separates it
* from the toggle's addon: the two read as one inline-end cluster.
*/
function ShadcnClear({ onClick, ...aria }: AutocompleteClearSlotProps) {
const { searchIn } = useAutocompleteContext();
if (searchIn === "trigger") {
return (
);
}
return (
);
}
/**
* Shadcn indicator
*
* A spinner while a first page is loading, the chevron otherwise.
*/
const ShadcnIndicator = ({ open, loading }: AutocompleteIndicatorSlotProps) => (
{loading ? : }
);
/**
* Shadcn popup
*
* shadcn's `Popover`, anchored to the trigger, as shadcn's combobox recipe
* uses it: it portals the list, places and animates it. Focus stays with the
* autocomplete, which moves it to the search box itself. Inside, a column
* the list fills, so the list scrolls inside the height it is given and the
* search row stays put. The surface keeps every prop the part is given, its `id` included, which
* is how the autocomplete knows the portaled list is still part of it, and
* from the computed style only the width (the trigger's) and the height cap;
* the library places it.
*/
function ShadcnPopup({ className, style, ...props }: AutocompletePopupSlotProps) {
const { position } = useAutocompleteContext();
const anchor = useMemo(() => ({ current: position.anchor }), [position.anchor]);
if (!position.anchor) return null;
return (
} />
event.preventDefault()}
onCloseAutoFocus={(event) => event.preventDefault()}
className={cn("flex w-auto flex-col overflow-hidden p-0", className)}
style={{ width: style?.width, minWidth: style?.minWidth, maxHeight: style?.maxHeight }}
{...props}
/>
);
}
/**
* Shadcn search
*
* The `command-input` row: an `Input` with the search icon beside it.
*/
const ShadcnSearch = ({ className, ...props }: AutocompleteSearchSlotProps) => (
);
/**
* Shadcn list
*
* The `command-list` scroll box, which is also the `
` the listbox role
* goes on.
*/
const ShadcnList = ({ className, ...props }: AutocompleteListSlotProps) => (
);
/**
* Shadcn option
*
* The `command-item` row. Disabled rows stay visible and only look
* unavailable: the engine is what refuses them. The inline-end padding keeps
* a long label clear of the check mark.
*/
const ShadcnOption = ({ className, ...props }: AutocompleteOptionSlotProps) => (
);
/**
* Shadcn group
*
* The `command-group`: its own `
);
/**
* Shadcn group label
*
* The `command-group` heading, with the combobox's label classes.
*/
const ShadcnGroupLabel = ({ label, ...props }: AutocompleteGroupLabelSlotProps) => (
{label}
);
/**
* Shadcn separator
*
* The `Separator` in a hidden list item, run out to the list's edges like
* the `command-separator`.
*/
const ShadcnSeparator = ({ className, ...props }: AutocompleteSeparatorSlotProps) => (
);
/**
* Shadcn option label
*
* The row's text.
*/
const ShadcnOptionLabel = ({ label }: AutocompleteOptionLabelSlotProps) => {label};
/**
* Shadcn check
*
* The mark on a selected row, pinned to the row's inline end. The icon is
* hidden from assistive technology, so it stays out of the option's
* accessible name.
*/
const ShadcnCheck = ({ selected }: AutocompleteCheckSlotProps) =>
selected ? (
) : null;
/**
* Shadcn empty state
*
* The `command-empty` row.
*/
const ShadcnEmpty = ({ message }: AutocompleteEmptySlotProps) => (
{message}
);
/**
* Shadcn loading state
*
* A spinner beside the message.
*/
const ShadcnLoading = ({ message }: AutocompleteLoadingSlotProps) => (
{message}
);
/**
* Shadcn error state
*
* The message in the destructive color and a retry `Button`.
*/
const ShadcnError = ({ error, onRetry, retryLabel }: AutocompleteErrorSlotProps) => (
);
/**
* Shadcn load-more row
*
* The paging sentinel, which is also a `Button` so the next page is reachable
* without a pointer.
*/
const ShadcnLoadMore = ({ ref, onLoadMore, loading, label }: AutocompleteLoadMoreSlotProps) => (
);
/**
* Shadcn components
*
* The slot map a shadcn/ui project would pass as `components`: its own
* primitives where it has them, and the popover and command class sets for
* the parts it styles by hand.
*/
export const shadcnComponents: Partial = {
Root: ShadcnRoot,
Trigger: ShadcnTrigger,
TriggerInput: ShadcnTriggerInput,
Toggle: ShadcnToggle,
Value: ShadcnValue,
Tag: ShadcnTag,
Clear: ShadcnClear,
Indicator: ShadcnIndicator,
Popup: ShadcnPopup,
Search: ShadcnSearch,
List: ShadcnList,
Option: ShadcnOption,
OptionLabel: ShadcnOptionLabel,
Check: ShadcnCheck,
Group: ShadcnGroup,
GroupLabel: ShadcnGroupLabel,
Separator: ShadcnSeparator,
Empty: ShadcnEmpty,
Loading: ShadcnLoading,
Error: ShadcnError,
Create: ShadcnCreate,
LoadMore: ShadcnLoadMore,
};
```
## MUI
This adapter renders `Autocomplete` with MUI parts. Copy the file into your app and pass the map to `components`; every slot you leave out keeps its fallback.
```tsx
/**
* Autocomplete for MUI
*
* A `components` map that renders the slotsmith autocomplete with MUI
* primitives, tested against MUI v7. Copy the file, keep the parts you want,
* and pass the map as `components={muiComponents}`; every slot left out
* keeps its fallback.
*/
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Chip from "@mui/material/Chip";
import CircularProgress from "@mui/material/CircularProgress";
import Divider from "@mui/material/Divider";
import IconButton from "@mui/material/IconButton";
import InputBase from "@mui/material/InputBase";
import List from "@mui/material/List";
import ListSubheader from "@mui/material/ListSubheader";
import MenuItem from "@mui/material/MenuItem";
import Paper from "@mui/material/Paper";
import Popper from "@mui/material/Popper";
import Typography from "@mui/material/Typography";
import type { SxProps, Theme } from "@mui/material/styles";
import { createSvgIcon } from "@mui/material/utils";
import type {
AutocompleteCheckSlotProps,
AutocompleteClearSlotProps,
AutocompleteComponents,
AutocompleteCreateSlotProps,
AutocompleteEmptySlotProps,
AutocompleteErrorSlotProps,
AutocompleteGroupLabelSlotProps,
AutocompleteGroupSlotProps,
AutocompleteIndicatorSlotProps,
AutocompleteListSlotProps,
AutocompleteLoadMoreSlotProps,
AutocompleteLoadingSlotProps,
AutocompleteOptionLabelSlotProps,
AutocompleteOptionSlotProps,
AutocompletePopupSlotProps,
AutocompleteRootSlotProps,
AutocompleteSearchSlotProps,
AutocompleteSeparatorSlotProps,
AutocompleteTagSlotProps,
AutocompleteToggleSlotProps,
AutocompleteTriggerInputSlotProps,
AutocompleteTriggerSlotProps,
AutocompleteValueSlotProps,
} from "slotsmith/autocomplete";
import { useAutocompleteContext } from "slotsmith/autocomplete";
/**
* Is true
*
* Whether an `aria-*` value means true: the boolean, or the string `"true"`
* a consumer may pass through the slot props.
*
* @param value - The attribute's value.
* @returns Whether it is set to true.
*/
const isTrue = (value: unknown) => value === true || value === "true";
/**
* Root style
*
* The positioning context the popup is measured against, and what no slot
* renders, laid out so the field holds together without slotsmith's
* stylesheet: the row of tags and the text field, and the announcement,
* which only assistive technology hears.
*/
const rootSx: SxProps = {
position: "relative",
"& .sac__body": { display: "flex", flex: 1, minWidth: 0, flexWrap: "wrap", alignItems: "center", gap: 0.5 },
"& .sac__sr-only": {
position: "absolute",
width: 1,
height: 1,
m: "-1px",
p: 0,
overflow: "hidden",
clipPath: "inset(50%)",
whiteSpace: "nowrap",
border: 0,
},
};
/**
* MUI root
*
* A `Box` the popup is measured against.
*/
const MuiRoot = (props: AutocompleteRootSlotProps) => ;
/**
* Arrow drop down icon
*
* The path of `@mui/icons-material`'s `ArrowDropDown`, the chevron of MUI's
* own autocomplete, built with `createSvgIcon` so the adapter needs no icons
* package.
*/
const ArrowDropDownIcon = createSvgIcon(, "ArrowDropDown");
/**
* Close icon
*
* The path of `@mui/icons-material`'s `Close`, the clear icon of MUI's own
* autocomplete.
*/
const CloseIcon = createSvgIcon(
,
"Close",
);
/**
* MUI trigger
*
* An outlined `Box`, styled off the `data-*` attributes the part carries
* rather than off props, so it stays a plain element part. `Box` reads `color`
* as a system prop, which is why the slot's props leave the DOM attribute of
* that name out.
*
* An invalid value takes the theme's `error` colour and MUI's `Mui-error`
* state class, the way an outlined `TextField` with `error` shows one.
*
* With the search in the trigger it is the outlined field around the
* `InputBase`: the primary border while the input has focus, read off
* `:focus-within`, and the error border off `data-invalid`, since
* `aria-invalid` is on the input then.
*/
const MuiTrigger = ({ className, ...props }: AutocompleteTriggerSlotProps) => {
/** The part always passes the `data-invalid` key, so its value is what counts. */
const invalid = isTrue(props["aria-invalid"]) || (props as Record)["data-invalid"] !== undefined;
return (
`inset 0 0 0 1px ${theme.palette.primary.main}` },
"&.Mui-error": { borderColor: "error.main" },
"&.Mui-error[data-search-in]:focus-within": { boxShadow: (theme) => `inset 0 0 0 1px ${theme.palette.error.main}` },
}}
{...props}
/>
);
};
/**
* MUI trigger input
*
* The `InputBase` that is the combobox when the search is in the trigger.
* As with the search box, everything that belongs on the input element
* itself goes through `inputProps`; `error` follows its `aria-invalid`.
*/
const MuiTriggerInput = ({ ref, value, onChange, placeholder, disabled, ...input }: AutocompleteTriggerInputSlotProps) => (
);
/**
* MUI toggle
*
* A small `IconButton` holding the chevron, kept out of the tab order, with
* the 2px padding of MUI's own popup indicator so its hover circle sits
* inside the field.
*/
const MuiToggle = (props: AutocompleteToggleSlotProps) => ;
/**
* MUI value
*
* The selected label, or the placeholder in the disabled text color.
*/
const MuiValue = ({ label, placeholder, empty }: AutocompleteValueSlotProps) => (
{empty ? placeholder : label}
);
/**
* MUI tag
*
* A `Chip` per selected value. `Chip` clones its `deleteIcon` and attaches its
* own click handler to it, so the icon is an `IconButton` carrying the
* accessible name: the remove control has to be reachable by keyboard. It
* takes the size and margins of the chip's own delete icon, so its hover
* circle stays inside the chip.
*/
const MuiTag = ({ label, onRemove, removeLabel, disabled }: AutocompleteTagSlotProps) => (
}
/>
);
/**
* MUI clear
*
* An `IconButton` that empties the selection. The click is stopped so it does
* not also reach the trigger and reopen the popup.
*/
const MuiClear = ({ onClick, ...aria }: AutocompleteClearSlotProps) => (
{
event.stopPropagation();
onClick();
}}
{...aria}
>
);
/**
* MUI indicator
*
* A `CircularProgress` while a first page is loading, a chevron otherwise.
*/
const MuiIndicator = ({ open, loading }: AutocompleteIndicatorSlotProps) =>
loading ? (
) : (
);
/**
* MUI popup
*
* MUI's `Popper`, as MUI's own autocomplete uses it: it portals the list,
* places it against the trigger (flipping when there is no room) and stacks
* it on the theme's `modal` layer. Inside it, a raised `Paper` column the
* list fills, so the list scrolls inside the height it is given and the
* search box stays put. The surface keeps every prop the part is given, its `id` included, which
* is how the autocomplete knows the portaled list is still part of it, and
* from the computed style only the width (the trigger's) and the height cap;
* the library places it.
*/
function MuiPopup({ style, ...props }: AutocompletePopupSlotProps) {
const { position } = useAutocompleteContext();
if (!position.anchor) return null;
return (
);
}
/**
* MUI search
*
* `InputBase` renders a wrapper around its input, so everything that belongs
* on the input element itself is handed over through `inputProps` — including
* the `role`, the aria wiring and the key handler the engine sets. Its `size`
* is a variant rather than the HTML attribute, which is why the slot's props
* leave `size` out.
*/
const MuiSearch = ({ ref, value, onChange, placeholder, ...input }: AutocompleteSearchSlotProps) => (
);
/**
* MUI list
*
* A dense `List`, which renders the `
` the listbox role goes on, and is
* the part that scrolls.
*/
const MuiList = (props: AutocompleteListSlotProps) => (
);
/**
* MUI option
*
* A `MenuItem`, with the part's `data-selected` mapped onto MUI's `selected`
* prop so the row gets `Mui-selected` styling. Disabled options keep MUI's
* `disabled` prop off on purpose: the engine already refuses them, and the
* row has to stay visible and hoverable.
*/
const MuiOption = (props: AutocompleteOptionSlotProps) => (
);
/**
* MUI option label
*
* The row's text.
*/
const MuiOptionLabel = ({ label }: AutocompleteOptionLabelSlotProps) => (
{label}
);
/**
* MUI check
*
* The mark on a selected row, hidden from assistive technology so it stays
* out of the option's accessible name.
*/
const MuiCheck = ({ selected }: AutocompleteCheckSlotProps) =>
selected ? (
✓
) : null;
/**
* MUI group
*
* MUI's grouped-list shape: a bare `
` holding the group's own `
`,
* which carries `role="group"` and the label wiring.
*/
const MuiGroup = ({ label: _label, labelId: _labelId, ...props }: AutocompleteGroupSlotProps) => (
);
/**
* MUI group label
*
* A `ListSubheader`, compacted to sit above dense rows at 28px, the virtual
* list's default `groupLabelSize`. It is not sticky, so it never covers the
* row the keyboard scrolls to.
*/
const MuiGroupLabel = ({ label, ...props }: AutocompleteGroupLabelSlotProps) => (
{label}
);
/**
* MUI separator
*
* A `Divider` rendered as the list item itself; the slot's `role` and
* `aria-hidden` replace its own `role="separator"`.
*/
const MuiSeparator = (props: AutocompleteSeparatorSlotProps) => (
);
/**
* MUI empty state
*
* Secondary `Typography` in place of the rows.
*/
const MuiEmpty = ({ message }: AutocompleteEmptySlotProps) => (
{message}
);
/**
* MUI loading state
*
* A `CircularProgress` beside the message.
*/
const MuiLoading = ({ message }: AutocompleteLoadingSlotProps) => (
{message}
);
/**
* MUI error state
*
* The message in the error color and a retry `Button`.
*/
const MuiError = ({ error, onRetry, retryLabel }: AutocompleteErrorSlotProps) => (
{error}
{onRetry ? (
) : null}
);
/**
* MUI create row
*
* A full-width `Button` offering to create whatever was searched for.
*/
const MuiCreate = ({ onCreate, loading, label }: AutocompleteCreateSlotProps) => (
);
/**
* MUI load-more row
*
* The paging sentinel, which is also a `Button` so the next page is reachable
* without a pointer.
*/
const MuiLoadMore = ({ ref, onLoadMore, loading, label }: AutocompleteLoadMoreSlotProps) => (
);
/**
* MUI components
*
* The slot map an MUI v7 project would pass as `components`, built from the
* primitives — `Paper`, `MenuItem`, `Chip`, `InputBase` — rather than from
* MUI's own `Autocomplete`, which is a competing engine.
*/
export const muiComponents: Partial = {
Root: MuiRoot,
Trigger: MuiTrigger,
TriggerInput: MuiTriggerInput,
Toggle: MuiToggle,
Value: MuiValue,
Tag: MuiTag,
Clear: MuiClear,
Indicator: MuiIndicator,
Popup: MuiPopup,
Search: MuiSearch,
List: MuiList,
Option: MuiOption,
OptionLabel: MuiOptionLabel,
Check: MuiCheck,
Group: MuiGroup,
GroupLabel: MuiGroupLabel,
Separator: MuiSeparator,
Empty: MuiEmpty,
Loading: MuiLoading,
Error: MuiError,
Create: MuiCreate,
LoadMore: MuiLoadMore,
};
```
## Chakra UI
This adapter renders `Autocomplete` with Chakra UI parts. Copy the file into your app and pass the map to `components`; every slot you leave out keeps its fallback.
```tsx
/**
* Autocomplete for Chakra UI
*
* A `components` map that renders the slotsmith autocomplete with Chakra UI
* primitives, tested against Chakra UI v3. Copy the file, keep the parts you
* want, and pass the map as `components={chakraComponents}`; every slot left
* out keeps its fallback.
*/
import { Box, Button, chakra, EmptyState, IconButton, Input, List, Popover, Portal, Separator, Span, Spinner, Tag, Text } from "@chakra-ui/react";
import type {
AutocompleteCheckSlotProps,
AutocompleteClearSlotProps,
AutocompleteComponents,
AutocompleteCreateSlotProps,
AutocompleteEmptySlotProps,
AutocompleteErrorSlotProps,
AutocompleteGroupLabelSlotProps,
AutocompleteGroupSlotProps,
AutocompleteIndicatorSlotProps,
AutocompleteListSlotProps,
AutocompleteLoadMoreSlotProps,
AutocompleteLoadingSlotProps,
AutocompleteOptionLabelSlotProps,
AutocompleteOptionSlotProps,
AutocompletePopupSlotProps,
AutocompleteRootSlotProps,
AutocompleteSearchSlotProps,
AutocompleteSeparatorSlotProps,
AutocompleteTagSlotProps,
AutocompleteToggleSlotProps,
AutocompleteTriggerInputSlotProps,
AutocompleteTriggerSlotProps,
AutocompleteValueSlotProps,
} from "slotsmith/autocomplete";
import { useAutocompleteContext } from "slotsmith/autocomplete";
/**
* Root layout
*
* What no slot renders, laid out so the field holds together without
* slotsmith's stylesheet: the row of tags and the text field, and the
* announcement, which only assistive technology hears.
*/
const rootCss = {
"& .sac__body": { display: "flex", flex: "1", minWidth: "0", flexWrap: "wrap", alignItems: "center", gap: "1" },
"& .sac__sr-only": { srOnly: true },
} as const;
/**
* Chakra root
*
* The `Box` the popup is measured against.
*/
const ChakraRoot = (props: AutocompleteRootSlotProps) => ;
/**
* No touch zoom
*
* Touch browsers zoom into a focused input whose text is under 16px, so on
* a coarse pointer the search inputs never go below it.
*/
const NO_TOUCH_ZOOM = { "@media (pointer: coarse)": { fontSize: "max(16px, 1em)" } };
/**
* Glyph
*
* A styled `