Autocomplete

Autocomplete helps users find and select values by suggesting options as they type.

Anatomy

Item	Name	Description	Component	Optional?
1	Label	Indicates what content the user needs to enter in the field.
2	Required Marker	Shows that entering data is mandatory to proceed.		Yes
3	Field	The container where the user’s selection is displayed.	Fields
4	Help Icon	Provides extra, non-essential information to guide the user.	Bare Icon Button Tooltip	Yes
5	Placeholder	Gives examples of the content format.		Yes
6	Hint Text	Offers guidance to help users input the correct data.		Yes
7	Searchable Field	When the field is active, this allows users to search and filter options within the list.	Bare Icon Button
8	Clear Button	Resets the selection by removing the selected options.	Bare Icon Button
9	Dropdown	The container that displays the list of selectable options.
10	Dropdown Item	A single selectable suggestion/option.

On mobile, the Active state adapts to display its content inside a Drawer.

Item	Name	Description	Component
1	Label	The field label is replicated in the mobile view to maintain context while selecting an option.
2	Search Input	Allows users to search and filter options within the list, similar to the desktop variant.	Search Input
3	Drawer	It holds the dropdown content.	Drawer

Property	Value	Token
align-items	center
gap	4px	spacing.50

Element	Property	Value	Token
Dropdown	padding-left padding-right	16px	spacing.200
Label	margin-bottom	8px	spacing.100
Field	margin-bottom	16px	spacing.200

Other specifications, like sizing and states, are shared with other field components. These are described on the dedicated Fields page.