class Primer::Beta::AutoComplete
be used unless there is compelling reason not to. A placeholder is not a label.
However, please note that a visible label should almost always
* If you must hide the label, set ‘visually_hide_label` to `true`.
* `label_text` is required and visible by default.
Always set an accessible label to help the user interact with the component.
@accessibility
input field. This list is populated by server search results.
Use `AutoComplete` to provide a user with a list of selectable suggestions that appear when they type into the
def before_render
def before_render results(classes: "") unless results input(classes: "") unless input end
def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, placeholder: nil, show_clear_button: false, visually_hide_label: false, size: DEFAULT_SIZE, full_width: false, disabled: false, invalid: false, inset: false, monospace: false, **system_arguments)
-
monospace(Boolean) -- monospace input font family -
inset(Boolean) -- subtle input background color -
placeholder(String) -- The placeholder text displayed within the input -
invalid(Boolean) -- Invalid input -
disabled(Boolean) -- Disabled input -
full_width(Boolean) -- Input can be full-width or fit to content -
size(Hash) -- Input size can be small, medium (default), or large -
system_arguments(Hash) -- <%= link_to_system_arguments_docs %> -
show_clear_button(Boolean) -- Adds optional clear button. -
visually_hide_label(Boolean) -- Controls if the label is visible. If `true`, screen reader only text will be added. -
list_id(String) -- Id of the list element. -
input_name(String) -- Optional name of the input element, defaults to `input_id` when not set. -
input_id(String) -- Id of the input element. -
src(String) -- The route to query. -
label_text(String) -- The label of the input.
Other tags:
- Example: With custom classes for the results -
Example: With custom classes for the input -
Example: Monospace variant -
Example: Inset variant -
Example: Full width field -
Example: Visually hidden label -
Example: Trailing action -
Example: Leading visual -
def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, placeholder: nil, show_clear_button: false, visually_hide_label: false, size: DEFAULT_SIZE, full_width: false, disabled: false, invalid: false, inset: false, monospace: false, **system_arguments) @label_text = label_text @list_id = list_id @input_id = input_id @input_name = input_name || input_id @placeholder = placeholder @visually_hide_label = visually_hide_label @show_clear_button = show_clear_button @system_arguments = deny_tag_argument(**system_arguments) @system_arguments[:tag] = "auto-complete" @system_arguments[:src] = src @system_arguments[:for] = list_id @disabled = disabled @invalid = invalid @size = size @inset = inset @monospace = monospace @full_width = full_width @field_wrap_classes = class_names( "FormControl-input-wrap", SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)], "FormControl-input-wrap--trailingAction": show_clear_button ) @form_group_classes = class_names( "FormControl", "FormControl--fullWidth": full_width ) end