AutoComplete

ready

This page may be removed. Primer plans to move all Rails component documentation to Lookbook.

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_text is required and visible by default.
If you must hide the label, set visually_hide_label to true. 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	Default	Description
label_text		`String` The label of the input.
src		`String` The route to query.
input_id		`String` Id of the input element.
input_name		`String` Optional name of the input element, defaults to `input_id` when not set.
list_id		`String` Id of the list element.
visually_hide_label		`Boolean` Controls if the label is visible. If `true`, screen reader only text will be added.
show_clear_button		`Boolean` Adds optional clear button.
system_arguments		`Hash` System arguments
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 `:auto`, `:large`, `:medium`, `:small`, `:xlarge`, or `:xxlarge`.
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

Slots

`results`

Customizable results list.

Name	Default	Description
system_arguments		`Hash` System arguments

`leading_visual`

Leading visual.

leading_visual_icon for a Primer::Beta::Octicon.

Name	Default	Description
system_arguments		`Hash` Same arguments as `Primer::Beta::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	Default	Description
system_arguments		`Hash` System arguments

AutoComplete::Item

Use AutoCompleteItem to list results of an auto-completed search.

Arguments

Name	Default	Description
value		`String` 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` Display description text below label
system_arguments		`Hash` System arguments

Slots

`leading_visual`

The leading visual rendered before the link.

Name	Default	Description
kwargs		`Hash` The arguments accepted by `Primer::Beta::Avatar` or `Primer::Beta::Octicon`

`trailing_visual`

The trailing visual rendered after the link.

Name	Default	Description
kwargs		`Hash` The arguments accepted by `Primer::Beta::Octicon`, `Primer::Beta::Label`, or `Primer::Beta::Counter`

`description`

Optional description

Name	Default	Description
system_arguments		`Hash` System arguments

AutoComplete::NoResultItem

Slots

`leading_visual`

The leading visual rendered before the link.

Name	Default	Description
kwargs		`Hash` The arguments accepted by `Primer::Beta::Avatar` or `Primer::Beta::Octicon`

`trailing_visual`

The trailing visual rendered after the link.

Name	Default	Description
kwargs		`Hash` The arguments accepted by `Primer::Beta::Octicon`, `Primer::Beta::Label`, or `Primer::Beta::Counter`

`description`

Optional description

Name	Default	Description
system_arguments		`Hash` System arguments