You are reading the v1 docs. v2 renamed several props and replaced GeckoUIPortal with GeckoUIProvider. Read this page in v2.

Live examples are only rendered in the v2 docs.

SelectEmpty

SelectEmpty displays a placeholder message when no options match the search filter. Use it to provide helpful feedback, suggestions, or actions when search returns no results.

Basic Usage

'use client';

import { useState } from 'react';
import { Select, SelectOption, SelectEmpty } from '@geckoui/geckoui';

function Example() {
  const [value, setValue] = useState<string | null>(null);

  return (
    <Select filterable="dropdown" value={value} onChange={setValue}>
      <SelectOption value="apple" label="Apple" />
      <SelectOption value="banana" label="Banana" />
      <SelectOption value="cherry" label="Cherry" />
      <SelectEmpty />
    </Select>
  );
}

Default message: If no children are provided, displays "No options".

Custom Message

<Select filterable="dropdown" value={value} onChange={setValue}>
  <SelectOption value="laptop" label="Laptop" />
  <SelectOption value="phone" label="Phone" />
  <SelectEmpty>
    No products found. Try a different search term.
  </SelectEmpty>
</Select>

Styled Empty State

<Select filterable="dropdown" value={value} onChange={setValue}>
  <SelectOption value="react" label="React" />
  <SelectOption value="vue" label="Vue" />
  <SelectEmpty className="text-center py-8 text-gray-500">
    <div className="text-4xl mb-2">🔍</div>
    <p className="font-medium">No frameworks found</p>
    <p className="text-sm mt-1">Try searching for something else</p>
  </SelectEmpty>
</Select>

With Action Button

const [showForm, setShowForm] = useState(false);

<Select filterable="dropdown" value={value} onChange={setValue}>
  <SelectOption value="bug" label="Bug" />
  <SelectOption value="feature" label="Feature" />
  <SelectEmpty>
    <div className="text-center py-6">
      <p className="text-gray-600 mb-3">No matching tags found</p>
      <button
        type="button"
        onClick={() => setShowForm(true)}
        className="text-blue-600 hover:text-blue-700 font-medium text-sm"
      >
        + Create new tag
      </button>
    </div>
  </SelectEmpty>
</Select>

Multiple Empty States

Combine SelectEmpty with show="always" options for complex layouts:

<Select filterable="dropdown" value={value} onChange={setValue}>
  {/* Regular options */}
  <SelectOption value="us" label="United States" />
  <SelectOption value="uk" label="United Kingdom" />
  <SelectOption value="ca" label="Canada" />

  {/* Always visible divider */}
  <hr />

  {/* Empty state with help text */}
  <SelectEmpty>
    <div className="px-4 py-3 text-sm text-gray-600">
      <p className="font-medium mb-1">Can't find your country?</p>
      <p>Try searching with different spelling or abbreviation</p>
    </div>
  </SelectEmpty>
</Select>

With Icon/Image

<Select filterable="dropdown" value={value} onChange={setValue}>
  <SelectOption value="user1" label="John Doe" />
  <SelectOption value="user2" label="Jane Smith" />
  <SelectEmpty>
    <div className="flex flex-col items-center justify-center py-8 px-4">
      <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-3">
        <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
        </svg>
      </div>
      <p className="text-gray-700 font-medium">No users found</p>
      <p className="text-gray-500 text-sm mt-1">Try adjusting your search</p>
    </div>
  </SelectEmpty>
</Select>

Props API

Prop	Type	Default	Description
`children`	`ReactNode`	`"No options"`	Custom empty state content
`className`	`string`	-	CSS class for styling

When It Appears

SelectEmpty only renders when:

The Select has filterable enabled
A search/filter keyword is entered
No options match the current filter

It does NOT appear when:

Select has no options at all (before filtering)
Filter is empty (no keyword entered)
hideDefaultEmptyUI is true on Select

Behavior

Automatic Visibility

The component automatically shows/hides based on filter results - you don't need to manage its visibility manually.

With hideDefaultEmptyUI

Use hideDefaultEmptyUI on Select to completely remove empty state UI:

<Select filterable="dropdown" hideDefaultEmptyUI value={value} onChange={setValue}>
  <SelectDropdownSearch />
  <SelectOption value="a" label="A" />
  <SelectEmpty>This will NOT render</SelectEmpty>
</Select>

Styling

Base CSS class: GeckoUISelectEmpty

You can customize with the className prop or target the base class in your stylesheet.

Common Use Cases

Loading State

const [loading, setLoading] = useState(false);

<SelectEmpty>
  {loading ? (
    <div className="text-center py-4">
      <Spinner size="sm" />
      <p className="text-sm text-gray-600 mt-2">Loading...</p>
    </div>
  ) : (
    <p>No results found</p>
  )}
</SelectEmpty>

Create New Item

<SelectEmpty>
  <button
    onClick={() => {
      createNewItem(keyword);
      closeMenu();
    }}
  >
    Create "{keyword}"
  </button>
</SelectEmpty>

Help Text with Links

<SelectEmpty>
  <div className="px-4 py-3">
    <p className="mb-2">No matches found</p>
    <a href="/help" className="text-blue-600 text-sm">
      Learn about search syntax →
    </a>
  </div>
</SelectEmpty>

Accessibility

Uses semantic HTML for screen readers
Properly announces "no results" state
Maintains keyboard navigation context

Filterable - Enable search and filtering
SelectOption - Visibility control with show prop
Basic Usage - Introduction to Select
SelectTrigger - Custom trigger patterns

SelectEmpty

On this page