ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
    • Playground
  • Examples
  • Docs
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Autocomplete

yarn add @clayui/autocomplete

An autocomplete text field is an input that offers the user text suggestions while they type.

  • Examples
  • Markup
  • API

Stable3.2.4View in LexiconCHANGELOGstorybook demos

  • Autocomplete
  • Autocomplete.DropDown
  • Autocomplete.Input
  • Autocomplete.Item
  • Autocomplete.LoadingIndicator

Autocomplete

PropertyTypeRequiredDefaultDescription
component
React.ForwardRefExoticComponent<any>falseReact.forwardRef< HTMLDivElement, React.HTMLAttributes<HTMLDivElement> >(({children, ...otherProps}, ref) => ( <ClayInput.Group {...otherProps} ref={ref}> <ClayInput.GroupItem>{children}</ClayInput.GroupItem> </ClayInput.Group> ))Div component to render. It can be a one component that will replace the markup.

Autocomplete.DropDown

PropertyTypeRequiredDefaultDescription
alignElementRef
React.RefObject<HTMLElement>falseHTML element that the menu should be aligned to
active
booleanfalsefalseFlag to indicate if menu is showing or not.
onSetActive
(val: boolean) => voidfalse() => {}Callback function for when active state changes.

Autocomplete.Input

Extends from `ClayForm.Input`

Autocomplete.Item

ClayAutocomplete.Item is a wrapper around ClayDropDown.Item but also underlines the bold characters that are matched. Feel free to create your own match rule using ClayDropDown.Item's API.

PropertyTypeRequiredDefaultDescription
innerRef
React.Ref<HTMLAnchorElement>false
match
stringfalse''Match is the string that will be compared with value.
value
stringtrueValue is the string that will be compared to the characters of the match property.

Autocomplete.LoadingIndicator

PropertyTypeRequiredDefaultDescription
component
React.ComponentType<any>false({children, ...otherProps}) => ( <ClayInput.GroupInsetItem {...otherProps} after> <span className="inline-item inline-item-middle">{children}</span> </ClayInput.GroupInsetItem> )Div component to render. It can be a one component that will replace the markup.

How can this be improved? Create an issue!