Autocomplete
Autocomplete allows users to quickly filter through a list of options and pick one or more values for a field.
On this page
Description
Use AutoComplete to provide a user with a list of selectable suggestions that appear when they type into the
input field. This list is populated by server search results.
Accessibility
Always set an accessible label to help the user interact with the component.
label_textis required and visible by default.- If you must hide the label, set
visually_hide_labeltotrue. However, please note that a visible label should almost always be used unless there is compelling reason not to. A placeholder is not a label.
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
label_text | String | N/A | The label of the input. |
src | String | N/A | The route to query. |
input_id | String | N/A | Id of the input element. |
input_name | String |
| Optional name of the input element, defaults to |
list_id | String | N/A | Id of the list element. |
visually_hide_label | Boolean |
| Controls if the label is visible. If |
show_clear_button | Boolean |
| Adds optional clear button. |
system_arguments | Hash | N/A | |
size | Hash |
| Input size can be small, medium (default), or large |
full_width | Boolean |
| Input can be full-width or fit to content |
width | String |
| Optional parameter to set max width of results list. One of |
disabled | Boolean |
| Disabled input |
invalid | Boolean |
| Invalid input |
placeholder | String |
| The placeholder text displayed within the input |
inset | Boolean |
| subtle input background color |
monospace | Boolean |
| monospace input font family |
Examples
Slots
results
Customizable results list.
| Name | Type | Default | Description |
|---|---|---|---|
system_arguments | Hash | N/A |
leading_visual
Leading visual.
leading_visual_iconfor a Octicon.
| Name | Type | Default | Description |
|---|---|---|---|
system_arguments | Hash | N/A | Same arguments as Octicon. |
input
Customizable input used to search for results. It is preferred to use this slot sparingly - it will be created by default if not explicity added.
| Name | Type | Default | Description |
|---|---|---|---|
system_arguments | Hash | N/A |
AutoComplete::Item
Use AutoCompleteItem to list results of an auto-completed search.
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
value | String | N/A | Value of the item. |
selected | Boolean |
| Whether the item is selected. |
disabled | Boolean |
| Whether the item is disabled. |
description_variant | Hash |
| Changes the description style. Allowed values are :inline, :block |
description | String | N/A | Display description text below label |
system_arguments | Hash | N/A |
Slots
leading_visual
The leading visual rendered before the link.
trailing_visual
The trailing visual rendered after the link.
description
Optional description
| Name | Type | Default | Description |
|---|---|---|---|
system_arguments | Hash | N/A |