## Autocomplete  
Autocomplete user input with any list of options.  
Category: Combobox  

> Need users to select multiple items? See `MultiSelect` or `TagsInput`.


Use `Autocomplete` component in the following cases:

- You want to allow user to enter any value
- You want to display suggestions to the user based on the input value
- You want to preserve user input on blur if option was not selected from the dropdown
- `value` and `label` of the option are the same.


### Not a searchable select

`Autocomplete` is not a searchable select, it is a text input with suggestions. Values are not enforced to be one of
the suggestions, user can type anything. If you need a searchable select, use `Select` component instead.
 To learn more about the differences between Autocomplete and Select, check [help center article](https://help.mantine.dev/q/select-autocomplete-difference).


### Made with Combobox

`Autocomplete` is built on top of [Combobox](https://mantine.dev/core/combobox/) and covers common use cases. If you need more advanced behavior or want to extend
its functionality, you can create your own custom `Autocomplete` component.  See this [GitHub repository](https://github.com/AnnMarieW/dmc_custom_components) for custom DMC component examples.

### Simple Example

`Autocomplete` provides user a list of suggestions based on the input, however user is not limited to suggestions and can type anything.


```python
import dash_mantine_components as dmc
from dash import Output, Input, html, callback

component = html.Div(
    [
        dmc.Autocomplete(
            label="Your favorite library",
            placeholder="Pick value or enter anything",
            id="framework-autocomplete",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            mb=10,
        ),
        dmc.Text(id="autocomplete-value"),
    ]
)


@callback(Output("autocomplete-value", "children"), Input("framework-autocomplete", "value"))
def select_value(value):
    return f" You selected {value}"
```
### Select first option on change

Set the `selectFirstOptionOnChange` prop to automatically select the first option in the dropdown when the input value
changes. This feature allows users to type a value and immediately press Enter to select the first matching option,
without needing to press the arrow down key first.

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Select your favorite library",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    placeholder="Pick value or enter anything",
    selectFirstOptionOnChange=True,
)
```
### autoSelectOnBlur

Set `autoSelectOnBlur=True` to automatically select the highlighted option when the input loses focus. To see this
feature in action: select an option with up/down arrows, then click outside the input:


```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library",
    placeholder="Pick value or enter anything",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    autoSelectOnBlur=True,
    clearable=True,
)
```
### Data Format

`Autoselect` `data` prop accepts data in one of the following formats:

```python
data = ["Pandas", "NumPy", "TensorFlow", "PyTorch"]

# or

data = [
    {"group": "US", "items": ["New York", "Seattle"]},
    {"group": "Canada", "items": ["Montreal", "Vancouver"]}
]
```

### Options filtering

By default, `Autocomplete` filters options by checking if the option label contains input value. You can change this behavior 
with `filter`. The filter function receives an object with the following properties as a single argument:
 - `options` – array of options or options groups, all options are in `{ value: string; label: string; disabled?: boolean }` format
 - `search` – current search query
 - `limit` – value of limit prop passed to `Autocomplete`



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


Example of a custom filter function that matches options by words instead of letters sequence:

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your country",
    placeholder="Pick value or enter anything",
    data=[
        "Great Britain",
        "Canada",
        "United States",
    ],
    filter={"function": "filterCountries"},
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.filterCountries = function ({ options, search }) {
  const queryWords = search.toLowerCase().trim().split(" ");
  return options.filter((option) => {
    const words = option.label.toLowerCase().trim().split(" ");
    return queryWords.every((word) =>
      words.some((labelWord) => labelWord.includes(word))
    );
  });
};
```


### Sort options

By default, options are sorted by their position in the data array. You can change this behavior with `filter` function:


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite Python library",
    placeholder="Pick value or enter anything",
    data=[
        "4 – NumPy",
        "1 – Pandas",
        "3 – Scikit-learn",
        "2 – Plotly",
    ],
    filter={"function": "filterPythonLibs"},
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.filterPythonLibs = function ({ options, search }) {
  const query = search.toLowerCase().trim();
  const result = options.filter((option) =>
    option.label.toLowerCase().trim().includes(query)
  );
  result.sort((a, b) => a.label.localeCompare(b.label));
  return result;
};
```


### Large Data Sets

The best strategy for large data sets is to limit the number of options that are rendered at the same time. You can
do it with limit prop. 

Note that if you use a custom `filter` function, you need to implement your own logic to limit the number of options in filter

Example of `Autocomplete` with 100 000 options, 10 options are rendered at the same time:

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="100,000 options",
    data=[f"Option {i}" for i in range(100000)],
    placeholder="use limit to optimize performance",
    limit=10,
)
```
### renderOption

`renderOption` function allows you to customize option rendering.


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.



```python

import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Autocomplete(
    label="Select with renderOption",
    placeholder="Select text align",
    data=[
      { "value": 'left', "label": 'left' },
      { "value": 'center', "label": 'center' },
      { "value": 'right', "label": 'right' },
      { "value": 'justify', "label": 'justify' },
    ],
    renderOption={"function": "renderOptionSelect"},
    clearable=True
)
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dmc = window.dash_mantine_components;
var iconify = window.dash_iconify;


dmcfuncs.renderOptionSelect = function ({ option, checked }) {

  const icons = {
   left: React.createElement(iconify.DashIconify, { icon: "mdi:format-align-left", width: 24 }),
   center: React.createElement(iconify.DashIconify, { icon: "mdi:format-align-center", width: 24 }),
   right: React.createElement(iconify.DashIconify, { icon: "mdi:format-align-right", width: 24 }),
   justify: React.createElement(iconify.DashIconify, { icon: "mdi:format-align-justify", width: 24 }),
  };

  const checkedIcon = React.createElement(iconify.DashIconify, {
    icon: "mdi:check",
    width: 24,
  });

  return React.createElement(
    dmc.Group,
    { flex: "1", gap: "xs" },
    icons[option.value],
    option.label,
    checked ? checkedIcon : null
  );
};
```


### Nothing found message

`Autocomplete` component does not support nothing found message. It is designed to accept any string as a value, so it
does not make sense to show nothing found message. If you want to limit user input to suggestions, you can use
searchable `Select` component instead. To learn more about the differences between `Autocomplete` and `Select`, check this [help center article](https://help.mantine.dev/q/select-autocomplete-difference).


### Scrollable dropdown

By default, the options list is wrapped with `ScrollArea.Autosize`. You can control dropdown max-height with 
`maxDropdownHeight` prop if you do not change the default settings.

If you want to use native scrollbars, set `withScrollArea=False`. Note that in this case, you will need to change 
dropdown styles with `Styles API`.


```python
import dash_mantine_components as dmc

component = dmc.Paper(
    [
        dmc.Autocomplete(
            label="Scrollable dropdown",
            data=[f"Option {i}" for i in range(100)],
            placeholder="Pick value or enter anything",
            maxDropdownHeight=300,
        ),
        dmc.Autocomplete(
            label="With native scroll",
            data=[f"Option {i}" for i in range(100)],
            placeholder="Pick value or enter anything",
            withScrollArea=False,
            styles={"dropdown": {"maxHeight": 200, "overflowY": "auto"}},
            mt="md",
        ),
    ]
)
```
### Group options

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    data=[
        {
            "group": "Data Analysis",
            "items": ["Pandas", "NumPy"],
        },
        {
            "group": "Deep Learning",
            "items": ["TensorFlow", "PyTorch"],
        },
    ],
)
```
### Disabled options

When option is disabled, it cannot be selected and is ignored in keyboard navigation.

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library:",
    data=[
        {"value":"Pandas"},
        {"value": "NumPy"},
        {"value":"TensorFlow",  "disabled": True},
        {"value":"PyTorch", "disabled": True}
    ],
)
```
### Combobox props
You can override `Combobox` props with `comboboxProps`. It is useful when you need to change some of the props that are
not exposed by `Autocomplete`, for example `withinPortal`:

```python
dmc.Autocomplete(comboboxProps={"withinPortal": False})
```


### Change dropdown z-index

```python
dmc.Autocomplete(comboboxProps={"zIndex": 1000})
```

### Inside Popover

To use `Autocomplete` inside popover, you need to set `withinPortal=False`:

```python
import dash_mantine_components as dmc

component = dmc.Popover(
    position="bottom",
    withArrow=True,
    shadow="md",
    children=[
        dmc.PopoverTarget(dmc.Button("Toggle Popover")),
        dmc.PopoverDropdown(
            dmc.Autocomplete(
                label="Your favorite library",
                placeholder="Pick value or enter anything",
                data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
                comboboxProps={"withinPortal": False},
            )
        ),
    ],
)
```
### Clearable

Set `clearable` prop to display the clear button in the right section. The button is not displayed when:

- The component does not have a value
- The component is disabled
- The component is read only

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library:",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    value="Pandas",
    clearable=True,
)
```
### Dropdown open in a callback

```python
import dash_mantine_components as dmc
from dash import Output, Input, html, callback

component = html.Div(
    [
        dmc.Button("Toggle dropdown", id="btn-autocomplete-opened", n_clicks=0),
        dmc.Autocomplete(
            label="Select your favorite library",
            placeholder="Select value",
            id="autocomplete-opened",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            comboboxProps={"position": "bottom", "middlewares": {"flip": False, "shift": False}},
            mb=10,
        ),
    ]
)


@callback(
    Output("autocomplete-opened", "dropdownOpened"), Input("btn-autocomplete-opened", "n_clicks")
)
def select_value(n):
    if n % 2 == 0:
        return False
    return True
```
### Dropdown position

By default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the
input. You can change this behavior by setting `position` and `middlewares` props, which are passed down to the
underlying `Popover` component.

Example of dropdown that is always displayed above the input:

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library",
    placeholder="Pick value or enter anything",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"position": "top", "middlewares": {"flip": False, "shift": False}},
)
```
### Dropdown width

To change dropdown width, set `width` prop in `comboboxProps`. By default, dropdown width is equal to the input width.

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library",
    placeholder="Pick value or enter anything",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"position": "bottom-start", "width": 200},
)
```
### Dropdown offset

To change dropdown offset, set `offset` prop in `comboboxProps`:  

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library",
    placeholder="Pick value or enter anything",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={
        "position": "bottom",
        "middlewares": {"flip": False, "shift": False},
        "offset": 0,
    },
)
```
### Dropdown animation
By default, dropdown animations are disabled. To enable them, you can set `transitionProps`, which will be passed
down to the underlying `Transition` component.

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library",
    placeholder="Pick value or enter anything",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"transitionProps": {"transition": "pop", "duration": 200}},
)
```
### Dropdown padding

```python
import dash_mantine_components as dmc

component = dmc.Paper(
    [
        dmc.Autocomplete(
            label="Zero padding",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick value or enter anything",
            comboboxProps={"dropdownPadding": 0},
        ),
        dmc.Autocomplete(
            label="10px padding",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick value or enter anything",
            comboboxProps={"dropdownPadding": 10},
            mt="md",
        ),
    ]
)
```
### Dropdown shadow

```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library",
    placeholder="Pick value or enter anything",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    comboboxProps={"shadow": "md"},
)
```
### Left and right sections

`Autocomplete` supports `leftSection` and `rightSection` props. These sections are rendered with absolute position
inside the input wrapper. You can use them to display icons, input controls or any other elements.

You can use the following props to control sections styles and content:

- `rightSection`/`leftSection` – component to render on the corresponding side of input
- `rightSectionWidth`/`leftSectionWidth` – controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component size prop.
- `rightSectionPointerEvents`/`leftSectionPointerEvents` – controls pointer-events property of the section. If you want to render a non-interactive element, set it to none to pass clicks through to the input.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Paper(
    [
        dmc.Autocomplete(
            label="Your favorite library",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick value or enter anythings",
            leftSectionPointerEvents="none",
            leftSection=DashIconify(icon="bi-book"),
        ),
        dmc.Autocomplete(
            label="Your favorite library",
            data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
            placeholder="Pick value or enter anything",
            rightSectionPointerEvents="none",
            rightSection=DashIconify(icon="bi-book"),
            mt="md",
        ),
    ]
)
```
### Input Props
`Autocomplete` component supports `Input` and Input Wrapper components features and all input element props.
`Autocomplete` documentation does not include all features supported by the component – see Input documentation to learn about all available features.


### Read only
Set `readOnly` to make the input read only. When readOnly is set, `Autocomplete` will not show suggestions and will not
call onChange function.


```python
import dash_mantine_components as dmc

component = dmc.Autocomplete(
    label="Your favorite library:",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    readOnly=True,
)
```
### Invalid State And Error


Note: Dash adds some css by default which can lead you to see a red box when setting the `required` or `error` 
prop to True. Use the below css snippet to counteract it.

```css
input:invalid {
    outline: none !important;
}
```

You can let the user know if the selected value is invalid. In the example below, you will get an error message if you
select less than 2 currency pairs.

```python
import dash_mantine_components as dmc
from dash import Output, Input, callback

component = dmc.Autocomplete(
    data=["USDINR", "EURUSD", "USDTWD", "USDJPY"],
    id="autocomplete-error",
    value="USDJPY",
)


@callback(Output("autocomplete-error", "error"), Input("autocomplete-error", "value"))
def select_value(value):
    return "JPY is not allowed!" if value == "USDJPY" else ""
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


### Autocomplete Selectors

| Selector     | Static selector                        | Description                                              |
|--------------|----------------------------------------|----------------------------------------------------------|
| `wrapper`    | `.mantine-Autocomplete-wrapper`        | Root element of the Input                                |
| `input`      | `.mantine-Autocomplete-input`          | Input element                                            |
| `section`    | `.mantine-Autocomplete-section`        | Left and right sections                                  |
| `root`       | `.mantine-Autocomplete-root`           | Root element                                             |
| `label`      | `.mantine-Autocomplete-label`          | Label element                                            |
| `required`   | `.mantine-Autocomplete-required`       | Required asterisk element, rendered inside label         |
| `description`| `.mantine-Autocomplete-description`    | Description element                                      |
| `error`      | `.mantine-Autocomplete-error`          | Error element                                            |
| `dropdown`   | `.mantine-Autocomplete-dropdown`       | Dropdown root element                                    |
| `options`    | `.mantine-Autocomplete-options`        | Options wrapper                                          |
| `option`     | `.mantine-Autocomplete-option`         | Option                                                   |
| `group`      | `.mantine-Autocomplete-group`          | Options group wrapper                                    |
| `groupLabel` | `.mantine-Autocomplete-groupLabel`     | Options group label                                      |


### Keyword Arguments
#### Autocomplete

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- autoSelectOnBlur (boolean; optional):
    If set, the highlighted option is selected when the input loses
    focus @,default,`False`.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- clearButtonProps (dict; optional):
    Props passed down to the clear button.

    `clearButtonProps` is a dict with keys:

- clearable (boolean; optional):
    Determines whether the clear button should be displayed in the
    right section when the component has value, `False` by default.

- comboboxProps (dict; optional):
    Props passed down to `Combobox` component.

    `comboboxProps` is a dict with keys:

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data (list of strings; optional):
    Data displayed in the dropdown.

- data-* (string; optional):
    Wild card data attributes.

- debounce (number | boolean; default False):
    (boolean | number; default False): If True, changes to input will
    be sent back to the Dash server only on enter or when losing
    focus. If it's False, it will send the value back on every change.
    If a number, it will not send anything back to the Dash server
    until the user has stopped typing for that number of milliseconds.

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- disabled (boolean; optional):
    Sets `disabled` attribute on the `input` element.

- dropdownOpened (boolean; optional):
    Controlled dropdown opened state.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

- filter (boolean | number | string | dict | list; optional):
    A Function based on which items are filtered and sorted. See
    https://www.dash-mantine-components.com/functions-as-props.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input` component.

- inputWrapperOrder (list of a value equal to: 'label', 'description', 'error', 'input's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- leftSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the left side of the input.

- leftSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `leftSection` element,
    `'none'` by default.

- leftSectionProps (dict; optional):
    Props passed down to the `leftSection` element.

- leftSectionWidth (string | number; optional):
    Left section width, used to set `width` of the section and input
    `padding-left`, by default equals to the input height.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- limit (number; optional):
    Maximum number of options displayed at a time, `Infinity` by
    default.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- maxDropdownHeight (string | number; optional):
    `max-height` of the dropdown, only applicable when
    `withScrollArea` prop is `True`, `250` by default.

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- n_blur (number; default 0):
    An integer that represents the number of times that this element
    has lost focus.

- n_submit (number; default 0):
    An integer that represents the number of times that this element
    has been submitted.

- name (string; optional):
    Name prop.

- openOnFocus (boolean; optional):
    If set, the dropdown opens when the input receives focus default
    `True`.

- persisted_props (list of strings; optional):
    Properties whose user interactions will persist after refreshing
    the component or the page. Since only `value` is allowed this prop
    can normally be ignored.

- persistence (string | number | boolean; optional):
    Used to allow user interactions in this component to be persisted
    when the component - or the page - is refreshed. If `persisted` is
    truthy and hasn't changed from its previous value, a `value` that
    the user has changed while using the app will keep that change, as
    long as the new `value` also matches what was given originally.
    Used in conjunction with `persistence_type`. Note:  The component
    must have an `id` for persistence to work.

- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):
    Where persisted user changes will be stored: memory: only kept in
    memory, reset on page refresh. local: window.localStorage, data is
    kept after the browser quit. session: window.sessionStorage, data
    is cleared once the browser quit.

- placeholder (string; optional):
    Placeholder.

- pointer (boolean; optional):
    Determines whether the input should have `cursor: pointer` style,
    `False` by default.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, numbers are converted to rem,
    `theme.defaultRadius` by default.

- readOnly (boolean; optional):
    Readonly.

- renderOption (boolean | number | string | dict | list; optional):
    A function to render content of the option, replaces the default
    content of the option.  See
    https://www.dash-mantine-components.com/functions-as-props.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- rightSection (a list of or a singular dash component, string or number; optional):
    Content section rendered on the right side of the input.

- rightSectionPointerEvents (a value equal to: 'auto', '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional):
    Sets `pointer-events` styles on the `rightSection` element,
    `'none'` by default.

- rightSectionProps (dict; optional):
    Props passed down to the `rightSection` element.

- rightSectionWidth (string | number; optional):
    Right section width, used to set `width` of the section and input
    `padding-right`, by default equals to the input height.

- scrollAreaProps (dict; optional):
    Props passed down to the underlying `ScrollArea` component in the
    dropdown.

    `scrollAreaProps` is a dict with keys:

- selectFirstOptionOnChange (boolean; optional):
    Determines whether the first option should be selected when value
    changes, `False` by default.

- selectFirstOptionOnDropdownOpen (boolean; optional):
    If set, the first option is selected when dropdown opens, `False`
    by default.

- size (optional):
    Controls input `height` and horizontal `padding`, `'sm'` by
    default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- value (string; default ''):
    Controlled component value.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- withErrorStyles (boolean; optional):
    Determines whether the input should have red border and red text
    color when the `error` prop is set, `True` by default.

- withScrollArea (boolean; optional):
    Determines whether the options should be wrapped with
    `ScrollArea.AutoSize`, `True` by default.

- wrapperProps (dict; optional):
    Props passed down to the root element.

    `wrapperProps` is a dict with keys: