Components
Autocomplete
An input field with suggestions dropdown.
Installation
npm install @mijn-ui/react-autocompleteUsage
import {
Autocomplete,
AutocompleteContent,
AutocompleteGroup,
AutocompleteItem,
AutocompleteTrigger,
} from "@mijn-ui/react"<Autocomplete>
<AutocompleteTrigger placeholder={"Search for a framework"} />
<AutocompleteGroup>
<AutocompleteContent>
<AutocompleteItem value="nextjs">Next.js</AutocompleteItem>
</AutocompleteContent>
</AutocompleteGroup>
</Autocomplete>Examples
Autocomplete With Scrollarea
Autocomplete With Dialog
API Reference
Standard element attributes are forwarded to the underlying component in addition to the props below.
| Prop | Type | Default | Description |
|---|---|---|---|
unstyled | boolean | false | Opt out of the default styles to fully customize the component. |
classNames | object | — | Override classes per slot (see Style Slots below). |
className | string | — | Additional classes for the root element. |
Autocomplete Style Slots
| Slot Name | Targeted Component | Purpose |
|---|---|---|
base | AutoComplete | Styles the root AutoComplete component. |
trigger | AutoComplete | Styles the trigger for the autocomplete. |
content | AutoCompleteContent | Applies styles to the content container. |
contentEmpty | AutoCompleteContent | Styles the content when no results are available. |
skeleton | AutoCompleteContent | Styles the skeleton/loading state of content. |
group | AutoCompleteGroup | Styles groups of autocomplete items. |
item | AutoCompleteItem | Styles individual autocomplete items. |