Autocomplete Field

The AutocompleteField is a text/select input equipped with a panel of suggested options when users start typing.

---

Usage

<AutocompleteField
    id="autocomplete-field-select"
    onChange={handleChange}
    onQueryChange={handleQueryChange}
    placeholder="Type to autocomplete options"
    value=""
>
    <AutocompleteField.Option value="1">
        Option 1
    </AutocompleteField.Option>
    <AutocompleteField.Option value="2">
        Option 2
    </AutocompleteField.Option>
    <AutocompleteField.Option value="3">
        Option 3
    </AutocompleteField.Option>
</AutocompleteField>

info

The AutocompleteField component is mostly a wrapper around the Autocomplete element. So any props that are available to the Autocomplete element are also available to the AutocompleteField component. The diffrence is the AutocompleteField component supports validation variants and messages.

---

Label

An example with a label using label prop.

Select an Option

<AutocompleteField
    id="autocomplete-field-select-label"
    onChange={handleChange}
    onQueryChange={handleQueryChange}
    placeholder="Type to autocomplete options"
    value=""
    label="Select an Option"
>
    <AutocompleteField.Option value="1">
        Option 1
    </AutocompleteField.Option>
    <AutocompleteField.Option value="2">
        Option 2
    </AutocompleteField.Option>
    <AutocompleteField.Option value="3">
        Option 3
    </AutocompleteField.Option>
</AutocompleteField>

---

Placeholder

An example with placeholder using placeholder prop.

Select an Option

<AutocompleteField
    id="autocomplete-field-select-placeholder"
    onChange={handleChange}
    onQueryChange={handleQueryChange}
    value=""
    label="Select an Option"
    placeholder="A custom placeholder"
>
    <AutocompleteField.Option value="1">
        Option 1
    </AutocompleteField.Option>
    <AutocompleteField.Option value="2">
        Option 2
    </AutocompleteField.Option>
    <AutocompleteField.Option value="3">
        Option 3
    </AutocompleteField.Option>
</AutocompleteField>

---

Selected Label

An example with default value using selectedLabel prop.

Select an Option

<AutocompleteField
    id="autocomplete-field-select-selected-label"
    onChange={handleChange}
    onQueryChange={handleQueryChange}
    label="Select an Option"
    placeholder="Type to autocomplete options"
    value="2"
    selectedLabel="Option 2"
>
    <AutocompleteField.Option value="1">
        Option 1
    </AutocompleteField.Option>
    <AutocompleteField.Option value="2">
        Option 2
    </AutocompleteField.Option>
    <AutocompleteField.Option value="3">
        Option 3
    </AutocompleteField.Option>
</AutocompleteField>

---

Nullable

Allow empty values with reset button X or deleting the option and clicking outside the field.

Select an Option

<AutocompleteField
    id="autocomplete-field-select-nullable"
    onChange={handleChange}
    onQueryChange={handleQueryChange}
    value=""
    label="Select an Option"
    placeholder="Type to autocomplete options"
    selectedLabel=""
>
    <AutocompleteField.Option value="1">
        Option 1
    </AutocompleteField.Option>
    <AutocompleteField.Option value="2">
        Option 2
    </AutocompleteField.Option>
    <AutocompleteField.Option value="3">
        Option 3
    </AutocompleteField.Option>
</AutocompleteField>

---

onChange

The onChange prop is a function that will be called when the value of the AutocompleteField component changes. The function will receive the new value of the AutocompleteField component as a parameter.

<AutocompleteField
    id="autocomplete-field-select-onchange"
    onChange={new_val => console.log(new_val)}
    onQueryChange={handleQueryChange}
>
    <AutocompleteField.Option value="1">
        Option 1
    </AutocompleteField.Option>
    <AutocompleteField.Option value="2">
        Option 2
    </AutocompleteField.Option>
    <AutocompleteField.Option value="3">
        Option 3
    </AutocompleteField.Option>
</AutocompleteField>

---

onQueryChange

The onQueryChange prop is a function that will be called when the query of the AutocompleteField component changes. The function will receive the new query event of the AutocompleteField component as a parameter.

<AutocompleteField
    id="autocomplete-field-select-querychange"
    onChange={(new_val) => console.log(new_val)}
    onQueryChange={(event) => console.log(event.target.value)}
>
    <AutocompleteField.Option value="1">
        Option 1
    </AutocompleteField.Option>
    <AutocompleteField.Option value="2">
        Option 2
    </AutocompleteField.Option>
    <AutocompleteField.Option value="3">
        Option 3
    </AutocompleteField.Option>
</AutocompleteField>

---

Validation

Success

Success validation variant

Success unlocked. Keep soaring!

<AutocompleteField
    id="autocomplete-field-select-success"
    onChange={handleChange}
    onQueryChange={handleQueryChange}
    label="Success validation variant"
    validation={{ 
        variant: "success", 
        message: "Success unlocked. Keep soaring!'"
    }}
>
    <AutocompleteField.Option value="1">
        Option 1
    </AutocompleteField.Option>
    <AutocompleteField.Option value="2">
        Option 2
    </AutocompleteField.Option>
    <AutocompleteField.Option value="3">
        Option 3
    </AutocompleteField.Option>
</AutocompleteField>

Warning

Warning validation variant

Caution: Proceed with care to avoid potential pitfalls.

<AutocompleteField
    id="autocomplete-field-select-warning"
    onChange={handleChange}
    onQueryChange={handleQueryChange}
    label="Warning validation variant"
    validation={{ 
        variant: "warning", 
        message: "Caution: Proceed with care to avoid potential pitfalls."
    }}
>
    <AutocompleteField.Option value="1">
        Option 1
    </AutocompleteField.Option>
    <AutocompleteField.Option value="2">
        Option 2
    </AutocompleteField.Option>
    <AutocompleteField.Option value="3">
        Option 3
    </AutocompleteField.Option>
</AutocompleteField>

Info

Info validation variant

Information: Knowledge is the key to empowerment.

<AutocompleteField
    id="autocomplete-field-select-info"
    onChange={handleChange}
    onQueryChange={handleQueryChange}
    label="Info validation variant"
    validation={{ 
        variant: "info", 
        message: "Information: Knowledge is the key to empowerment." 
    }}
>
    <AutocompleteField.Option value="1">
        Option 1
    </AutocompleteField.Option>
    <AutocompleteField.Option value="2">
        Option 2
    </AutocompleteField.Option>
    <AutocompleteField.Option value="3">
        Option 3
    </AutocompleteField.Option>
</AutocompleteField>

Error

Error validation variant

Error: Connection lost. Please reconnect.

<AutocompleteField
    id="autocomplete-field-select-error"
    onChange={handleChange}
    onQueryChange={handleQueryChange}
    label="Error validation variant"
    validation={{ 
        variant: "error", 
        message: "Error: Connection lost. Please reconnect." 
    }}
>
    <AutocompleteField.Option value="1">
        Option 1
    </AutocompleteField.Option>
    <AutocompleteField.Option value="2">
        Option 2
    </AutocompleteField.Option>
    <AutocompleteField.Option value="3">
        Option 3
    </AutocompleteField.Option>
</AutocompleteField>

---

Props

Attribute	Type	Description	Default
id*	string |	HTML id attribute.	-
value	string | number | bool |	-	-
placeholder	string |	-	-
children	node |	Pass `AutocompleteField.Option` components as children	-
selectedLabel	string |	The label of the selected option.	-
label	string |	The label of the autocomplete input.	-
labelProps	object |	-	-
labelSuffix	node |	-	-
description	node |	Content to be displayed below the input.	-
onChange*	function |	Callback function that is fired when an item has been selected.	-
onQueryChange*	function |	Callback function that is fired when the query changes.	-
validation	{ variant: string, message: node } |	Validation state and message	-
nullable	bool |	If true, the user can clear the selected value with `X` button.	-
buttonProps	object |	Props to be passed to the `X` button element.	-
clearButtonScreenReaderText	string |	Screen reader text for the clear button.	Clear
className	string |	-	-