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

Search...

'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

Search products...

<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

Search frameworks...

<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

Select a tag...

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:

Search countries...

<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

Search users...

<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