Nebula UI
Introduction
IconLabelColorsTypography
Button
AlertBadgeBannerLoaderProgress BarEmptyTooltip
HeaderNavbarSidebarTabsPaginationBreadcrumbSeparator
AvatarModule BoxChartsColor CardsTableSliderCalendar
Text InputPassword InputTextarea InputCheckboxSwitchRadiogroupSelectorSearch BarDatepickerFile Upload
DropdownPopoverDialogTourDrawerAccordion
Overview
Design Themes

Nebula UI Library

v1.0.0

Component

Selector

Disponible

Un selector interactivo que combina un botón disparador con un panel desplegable de opciones basado en Popover. Incluye variantes Combobox (con búsqueda integrada) y Select.

Combobox · Select · Search · States · Sizes

Import

Importa los estilos base y los componentes Combobox y Select.

TypeScript
1import 'nave-ui-library/styles.css'
2import { Combobox, Select } from 'nave-ui-library/react'

Basic Usage

El Combobox permite seleccionar una opción de una lista con búsqueda integrada. Al estar basado en Popover de Radix, gestiona correctamente el cierre. Cierra automáticamente al seleccionar y limpia el término de búsqueda al cerrar.

Combobox — Default
Combobox — Disabled
Combobox — Error
Select — Default
Select — Disabled
Select — Error

Search & Filter

El Combobox incluye un input de búsqueda integrado que filtra las opciones en tiempo real (case-insensitive). Muestra 'Sin resultados' cuando ningún item coincide. Al cerrar el popover, el término de búsqueda se limpia automáticamente.

Select Searchable

El Select también puede activar búsqueda con la prop searchable. A diferencia del Combobox (que siempre tiene búsqueda), en el Select es opt-in.

Select — Sin búsqueda (default)
Select — Con búsqueda

Auto-focus en búsqueda

El Combobox NO maneja el foco internamente. El consumidor puede usar la prop searchRef para enfocar el input de búsqueda al abrir el dropdown. Esto da control total sobre cuándo y cómo se gestiona el foco.

Controlled Open / closeOnSelect

Usa open y onOpenChange para controlar el estado del popover externamente. Combinado con closeOnSelect={false}, el dropdown permanece abierto tras cada selección — útil para selección múltiple.

Sizes

Soporta variantes de altura small (36px) y medium (44px).

Combobox — Medium
Combobox — Small
Select — Medium
Select — Small

API Reference — Props compartidas

Props disponibles tanto para Combobox como para Select.

PropTypeDefaultDescription
itemsreq
Array<{ label: string; value: string }>—Array de opciones para el selector.
placeholder
string—Texto del placeholder del trigger.
value
string—Valor seleccionado (controlled mode).
onValueChange
(value: string) => void—Callback al cambiar la selección.
label
string—Etiqueta superior del campo.
size
"small" | "medium""medium"Tamaño del trigger.
disabled
booleanfalseDeshabilita el componente.
error
booleanfalseActiva el estilo de error.
tokens
Partial<ThemeTokensBase>—Override local de tema/tokens.
open
boolean—Estado controlado del popover. Cuando se omite, el componente maneja su propio estado.
onOpenChange
(open: boolean) => void—Callback al cambiar el estado del popover (controlado o no controlado).
closeOnSelect
booleantrueCierra el popover automáticamente al seleccionar un item.

API Reference — Props exclusivas de Combobox

Props adicionales sólo disponibles en Combobox.

PropTypeDefaultDescription
searchPlaceholder
string"Buscar..."Placeholder del input de búsqueda dentro del dropdown (solo Combobox).
searchRef
React.Ref<HTMLInputElement>—Ref al input de búsqueda interno. Permite al consumidor manejar el foco externamente (solo Combobox).

Registry

Ver configuración técnica del registro
JSON
1{
2  "name": "Combobox",
3  "description": "Combobox con búsqueda integrada y selección combinadas. Filtra opciones en tiempo real, cierra al seleccionar por defecto, y permite control externo del estado open.",
4  "component": "Combobox",
5  "files": [
6    "components/base/data-entry/inputs/Combobox.tsx"
7  ],
8  "dependencies": [
9    "react",
10    "@radix-ui/react-popover"
11  ],
12  "props": {
13    "value": {
14      "type": "string",
15      "description": "Currently selected value."
16    },
17    "onValueChange": {
18      "type": "(value: string) => void",
19      "description": "Callback executed when the selected value changes."
20    },
21    "items": {
22      "type": "{ label: string; value: string }[]",
23      "description": "List of selectable items."
24    },
25    "placeholder": {
26      "type": "string",
27      "description": "Placeholder text displayed when no value is selected."
28    },
29    "size": {
30      "type": "'small' | 'medium'",
31      "description": "Size of the input."
32    },
33    "error": {
34      "type": "boolean",
35      "description": "Whether the input has an error."
36    },
37    "label": {
38      "type": "string",
39      "description": "Label for the input."
40    },
41    "disabled": {
42      "type": "boolean",
43      "description": "Whether the input is disabled."
44    },
45    "open": {
46      "type": "boolean",
47      "description": "Controlled open state. When omitted the component manages its own state."
48    },
49    "onOpenChange": {
50      "type": "(open: boolean) => void",
51      "description": "Called when the popover open state changes."
52    },
53    "closeOnSelect": {
54      "type": "boolean",
55      "default": "true",
56      "description": "Whether to close the popover after selecting an item."
57    },
58    "searchPlaceholder": {
59      "type": "string",
60      "default": "Buscar...",
61      "description": "Placeholder for the search input inside the dropdown."
62    },
63    "searchRef": {
64      "type": "React.Ref<HTMLInputElement>",
65      "description": "Ref forwarded to the inner search input. Consumers can use it to manage focus."
66    }
67  }
68}
JSON
1{
2  "name": "Select",
3  "description": "Select dropdown para elegir una opción de una lista. Cierra al seleccionar por defecto y permite control externo del estado open.",
4  "component": "Select",
5  "files": [
6    "components/base/data-entry/inputs/Select.tsx"
7  ],
8  "dependencies": [
9    "react",
10    "@radix-ui/react-popover"
11  ],
12  "props": {
13    "value": {
14      "type": "string",
15      "description": "Currently selected value."
16    },
17    "onValueChange": {
18      "type": "(value: string) => void",
19      "description": "Callback executed when the selected value changes."
20    },
21    "items": {
22      "type": "{ label: string; value: string }[]",
23      "description": "List of selectable items."
24    },
25    "placeholder": {
26      "type": "string",
27      "description": "Placeholder text displayed when no value is selected."
28    },
29    "size": {
30      "type": "'small' | 'medium'",
31      "description": "Size of the input."
32    },
33    "error": {
34      "type": "boolean",
35      "description": "Whether the input has an error."
36    },
37    "label": {
38      "type": "string",
39      "description": "Label for the input."
40    },
41    "disabled": {
42      "type": "boolean",
43      "description": "Whether the input is disabled."
44    },
45    "open": {
46      "type": "boolean",
47      "description": "Controlled open state. When omitted the component manages its own state."
48    },
49    "onOpenChange": {
50      "type": "(open: boolean) => void",
51      "description": "Called when the popover open state changes."
52    },
53    "closeOnSelect": {
54      "type": "boolean",
55      "default": "true",
56      "description": "Whether to close the popover after selecting an item."
57    },
58    "searchable": {
59      "type": "boolean",
60      "default": "false",
61      "description": "Enables a search input inside the dropdown to filter items."
62    },
63    "searchPlaceholder": {
64      "type": "string",
65      "default": "Buscar...",
66      "description": "Placeholder for the search input (only when searchable is true)."
67    },
68    "searchRef": {
69      "type": "React.Ref<HTMLInputElement>",
70      "description": "Ref forwarded to the search input. Consumers can use it to manage focus."
71    }
72  }
73}