Autocomplete

Autocomplete allows users to quickly filter through a list of options and pick one or more values for a field.

v0.21.0BetaNot reviewed for accessibility

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

NameDefaultDescription
label_text

N/A

String

The label of the input.

src

N/A

String

The route to query.

input_id

N/A

String

Id of the input element.

input_name

nil

String

Optional name of the input element, defaults to input_id when not set.

list_id

N/A

String

Id of the list element.

visually_hide_label

false

Boolean

Controls if the label is visible. If true, screen reader only text will be added.

show_clear_button

false

Boolean

Adds optional clear button.

system_arguments

N/A

Hash
size

:medium

Hash

Input size can be small, medium (default), or large

full_width

false

Boolean

Input can be full-width or fit to content

width

:auto

String

Optional parameter to set max width of results list. One of :auto, :large, :medium, :small, :xlarge, or :xxlarge.

disabled

false

Boolean

Disabled input

invalid

false

Boolean

Invalid input

placeholder

nil

String

The placeholder text displayed within the input

inset

false

Boolean

subtle input background color

monospace

false

Boolean

monospace input font family

Examples

Slots

results

Customizable results list.

NameDefaultDescription
system_arguments

N/A

Hash

leading_visual

Leading visual.

  • leading_visual_icon for a Octicon.
NameDefaultDescription
system_arguments

N/A

Hash

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.

NameDefaultDescription
system_arguments

N/A

Hash

AutoComplete::Item

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

Arguments

NameDefaultDescription
value

N/A

String

Value of the item.

selected

false

Boolean

Whether the item is selected.

disabled

false

Boolean

Whether the item is disabled.

description_variant

:block

Hash

Changes the description style. Allowed values are :inline, :block

description

N/A

String

Display description text below label

system_arguments

N/A

Hash

Slots

leading_visual

The leading visual rendered before the link.

NameDefaultDescription
kwargs

N/A

Hash

The arguments accepted by Avatar or Octicon

trailing_visual

The trailing visual rendered after the link.

NameDefaultDescription
kwargs

N/A

Hash

The arguments accepted by Octicon, Label, or Counter

description

Optional description

NameDefaultDescription
system_arguments

N/A

Hash