equinor · pomfrida · Apr 14, 2026 · Apr 13, 2026
@@ -64,7 +64,7 @@ Enable the `multiple` property for multiple selection of values.
 <Canvas of={ComponentStories.Multiple} />
 
 ### Selection display
-Use the `selectionDisplay` prop to control how selected items are displayed in the input field. The default is `summary`, which shows a count of selected items. Use `chips` to display each selected item as a removable chip.
+Use the `selectionDisplay` prop to control how selected items are displayed in the input field. The default is `summary`, which shows a count of selected items. Use `chips` to display each selected item as a removable chip. If you want to limit the amount of chips shown, use the `chipCount` prop
 
 <Canvas of={ComponentStories.SelectionDisplay} />
 

@@ -204,7 +204,7 @@ Multiple.args = {
 export const SelectionDisplay: StoryFn<AutocompleteProps<MyOptionType>> = (
   args,
 ) => {
-  const { options } = args
+  const { options, chipCount } = args
 
   return (
     <>
@@ -223,6 +223,7 @@ export const SelectionDisplay: StoryFn<AutocompleteProps<MyOptionType>> = (
         multiple
         placeholder="Select stocks"
         optionLabel={optionLabel}
+        chipCount={chipCount}
         selectionDisplay="chips"
         initialSelectedOptions={[options[0], options[1]]}
       />
@@ -232,6 +233,7 @@ export const SelectionDisplay: StoryFn<AutocompleteProps<MyOptionType>> = (
 SelectionDisplay.storyName = 'Selection display'
 SelectionDisplay.args = {
   options: stocks,
+  chipCount: 2,
 }
 
 export const ControlledSingleSelect: StoryFn<

@@ -945,6 +945,25 @@ describe('Autocomplete: Scroll position and navigation memory', () => {
     expect(chip2).toBeInTheDocument()
   })
 
+  it('Shows + N more chips if chipCount is set', async () => {
+    render(
+      <Autocomplete
+        label={labelText}
+        options={items}
+        multiple
+        selectionDisplay="chips"
+        chipCount={1}
+        initialSelectedOptions={['One', 'Two']}
+      />,
+    )
+
+    const chip1 = await screen.findByText('One')
+    const chip2 = await screen.findByText('+1 more')
+
+    expect(chip1).toBeInTheDocument()
+    expect(chip2).toBeInTheDocument()
+  })
+
   it('Removes chip when clicking the chip remove button', async () => {
     const handleChange = jest.fn()
     render(

@@ -92,6 +92,11 @@ export type AutocompleteProps<T = string> = {
    * @default 'summary'
    */
   selectionDisplay?: 'chips' | 'summary'
+  /** Amount of values to list in chips (only relevant if selectionDisplay = 'chips')
+   * When left blank, all values will be shown as chips
+   * @default undefined
+   */
+  chipCount?: number
   /** Callback for the selected item change
    * changes.selectedItems gives the selected items
    */

@@ -42,6 +42,7 @@ export const MultipleInput = () => {
     hideClearButton,
     restHtmlProps,
     consolidatedEvents,
+    chipCount,
     inputRef,
   } = useAutocompleteContext()
 
@@ -55,7 +56,10 @@ export const MultipleInput = () => {
     if (isKeyboardEvent && selectedItems.length > 1) {
       const isLastChip = index === selectedItems.length - 1
       const nextItem = selectedItems[isLastChip ? index - 1 : index + 1]
-      chipRefs.current.get(getLabel(nextItem))?.focus()
+      const nextRef = chipRefs.current.get(getLabel(nextItem))
+      // Fall back to input when next chip is hidden (beyond chipCount)
+      if (nextRef) nextRef.focus()
+      else inputRef.current?.focus()
     } else if (!isKeyboardEvent) {
       inputRef.current?.focus()
     }
@@ -92,13 +96,35 @@ export const MultipleInput = () => {
     >
       <ChipContainer $density={density}>
         {selectionDisplay === 'chips' &&
-          selectedItems.map((item, index) => (
+          selectedItems
+            .slice(0, chipCount > 0 ? chipCount : undefined)
+            .map((item, index) => (
+              <Chip
+                key={getLabel(item)}
+                ref={(el) => {
+                  if (el) chipRefs.current.set(getLabel(item), el)
+                  else chipRefs.current.delete(getLabel(item))
+                }}
+                style={{
+                  outline:
+                    '1px solid var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1))',
+                  ...(density === 'compact' && {
+                    height: '16px',
+                    fontSize: '12px',
+                    gridGap: '0px',
+                  }),
+                }}
+                onDelete={handleChipDelete(item, index)}
+                onClick={handleChipClick(item, index)}
+                disabled={readOnly}
+              >
+                {getLabel(item)}
+              </Chip>
+            ))}
+        {selectionDisplay === 'chips' &&
+          chipCount &&
+          selectedItems.length > chipCount && (
             <Chip
-              key={getLabel(item)}
-              ref={(el) => {
-                if (el) chipRefs.current.set(getLabel(item), el)
-                else chipRefs.current.delete(getLabel(item))
-              }}
               style={{
                 outline:
                   '1px solid var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1))',
@@ -108,13 +134,11 @@ export const MultipleInput = () => {
                   gridGap: '0px',
                 }),
               }}
-              onDelete={handleChipDelete(item, index)}
-              onClick={handleChipClick(item, index)}
               disabled={readOnly}
             >
-              {getLabel(item)}
+              +{selectedItems.length - chipCount} more
             </Chip>
-          ))}
+          )}
         <UnstyledInput
           {...restHtmlProps}
           {...inputProps}

@@ -45,6 +45,7 @@ export const useAutocomplete = <T>({
   onInputChange,
   selectedOptions: _selectedOptions,
   selectionDisplay = 'summary',
+  chipCount,
   multiple,
   itemToKey: _itemToKey,
   itemCompare: _itemCompare,
@@ -699,6 +700,7 @@ export const useAutocomplete = <T>({
     onInputChange,
     selectedOptions,
     selectionDisplay,
+    chipCount,
     itemToKey,
     itemCompare,
     allowSelectAll,