Search

If true, shows search button. Otherwise, shows search icon

Controlled mode, popup stays open

Popup is open on first load

If true, popup will open when input receives focus

Text that will be used as the visual and accessible label for the component

Custom filter function that takes the search query and returns an array of React elements

Function to be called when the active result changes via keyboard navigation

Function to be called when the result is either clicked or selected via Enter/Return key

Function to be called when results are closed

Specifies the URL where the form data should be sent when submitted. If omitted, form data will be submitted against the current page.

The id of the input component, used to associate the input with the built-in accessible label and hint

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

Must be defined when the form control collects user personal data. Attribute value must match the tokens defined in input purposes section

The name attribute of the input field, will default to the id provided

Flag to allow for default validation message to show

The type of the input component, defaults to 'text'

Value shown in input (controlled mode)

The onChange event handler to attach to the input field (controlled)

Default value to be used as the search query and shown in input

The id of the container of the text describing the input, intended for custom hint text

@ignore

@ignore

@ignore

Positions the slot (children) to the left or right of the other content within the container

Default, error, or success state. Will use the value provided by the context when wrapped in a FieldControl component.

The status message to be displayed if status is 'success' or 'error'.

A ref to the container element

Props to be spread onto the parent div container

Function called when clear search term button is clicked

Function called when search button is clicked and when form is submitted

If true, show loading state for search

Props to be spread onto search button

Props to be spread onto clear search query button

Hint text to use inbuilt hint instead of a custom label

If true, visually hides the hint text (it will still be accessible to screen readers)

The slot for the tooltip

Overrides for labels that have been defaulted in the component.

ID for each li element

Function called when li element receives focus

Function called on mouse down event on li element

Function called on mouse enter event on li element to set the aria-selected attribute

Object that contains the id and index of the selected li element