AutoComplete

When to use

Filter or pick from a medium-to-large option list with typeahead. Used inside DataTable filter rows and standalone forms.

When NOT to use

Small fixed enums — use Podium Select. Multi-select — use a dedicated multi-select pattern.

Podium primitives composed

• Podium TextField

Props

Auto-generated from src/components/AutoComplete/AutoComplete.types.ts. Do not edit by hand. Run pnpm docs:props after changing source JSDoc.

AutoCompleteProps

Props for the AutoComplete component. Mirrors MUI Autocomplete while adding Podium-style clear option support.

Prop	Type	Required	Description
clearable	boolean	No	Show a “Clear Selection” option at the bottom of the dropdown
clearText	string	No	Text for the clear option row
compact	boolean	No	Use a compact input size (TextField size="small").
error	boolean	No	Input error state
helperText	ReactNode	No	Helper message below the input
label	string	No	Label shown in the text input
options	readonly TOption[]	Yes	—
placeholder	string	No	Input placeholder
required	boolean	No	Marks the field as required
requiredErrorText	string	No	Message when required and touched but no value is selected.
textFieldProps	Omit<TextFieldProps, 'error' | 'helperText' | 'label' | 'required'>	No	Extra TextField props for the rendered input
validateOnTouch	boolean	No	Validate required state only after the user interacts (open/blur).

Examples

Static options

import { AutoComplete } from '@nike/whisker-component-library';

<AutoComplete
  id="division-filter"
  label="Division"
  options={[{ label: 'Apparel', value: 'apparel' }]}
  value={value}
  onChange={setValue}
  slotProps={{ input: { inputProps: { 'data-testid': 'division-filter' } } }}
/>;

Live playground