NOCTA UI

Combobox

Searchable combobox component with filtering, keyboard navigation, and accessibility for advanced option selection

Installation

Install the Combobox component using the nocta-ui CLI:

npx @nocta-ui/cli add combobox

Import the component:

import { Combobox, ComboboxOption } from '@/components/ui/combobox';

Examples

Default Combobox

Variants

This field is required

Selection confirmed

Sizes

Clearable Selection

X button appears when value is selected

No clear button shown

Disabled Options

Some options are disabled (e.g., PHP)

Disabled State

Entire combobox is disabled

Custom Messages

Type something that doesn't match to see custom message

Api Reference

Combobox

Prop

Type

ComboboxOption

Prop

Type

Checkbox Card

A selectable card that pairs rich summaries with checkbox behaviour for multi-select interfaces.

File Upload

Advanced file upload component with drag & drop, progress tracking, validation, and preview support

On this page

Installation
Examples
Default Combobox
Variants
Sizes
Clearable Selection
Disabled Options
Disabled State
Custom Messages
Api Reference
Combobox
ComboboxOption