Crate dioxus_nox_select 

dioxus-nox-select

⚠️ Disclaimer: This crate was entirely generated by AI (Claude) as part of a personal learning project. It has not been battle-tested in production and may contain bugs or unsound abstractions. Use at your own risk and exercise extreme caution before depending on it in anything that matters.

Headless Select, Combobox, and Multiselect primitives for Dioxus applications.

Follows the WAI-ARIA Combobox pattern and Listbox pattern with proper ARIA roles, keyboard navigation, and data attributes for styling — shipping zero visual styles.

Layers

Layer	Items	Dioxus dependency?
Types	AutoComplete, ItemEntry, GroupEntry, ScoredItem, CustomFilter	No
Context	SelectContext	Yes (Signals, Memos)
Components	select::Root, select::Trigger, select::Value, select::Input, select::Content, select::Item, etc.	Yes (RSX, context)
Navigation	Pure navigation functions (internal)	No
Filter	Nucleo-powered fuzzy filtering (internal)	No (only nucleo)

Quick start — Select-only

use dioxus::prelude::*;
use dioxus_nox_select::*;

#[component]
fn App() -> Element {
    rsx! {
        select::Root {
            default_value: "apple",
            select::Trigger {
                select::Value { placeholder: "Choose a fruit…" }
            }
            select::Content {
                select::Item { value: "apple", label: "Apple",
                    select::ItemText { "Apple" }
                }
                select::Item { value: "banana", label: "Banana",
                    select::ItemText { "Banana" }
                }
                select::Item { value: "cherry", label: "Cherry",
                    select::ItemText { "Cherry" }
                }
            }
        }
    }
}

Quick start — Combobox with search

use dioxus::prelude::*;
use dioxus_nox_select::*;

#[component]
fn App() -> Element {
    rsx! {
        select::Root {
            autocomplete: AutoComplete::List,
            select::Input { placeholder: "Search fruits…" }
            select::Content {
                select::Empty { "No results found." }
                select::Item { value: "apple", label: "Apple", "Apple" }
                select::Item { value: "banana", label: "Banana", "Banana" }
                select::Item { value: "cherry", label: "Cherry", "Cherry" }
            }
        }
    }
}

Quick start — Multiselect

use dioxus::prelude::*;
use dioxus_nox_select::*;

#[component]
fn App() -> Element {
    rsx! {
        select::Root {
            multiple: true,
            select::Trigger {
                select::Value { placeholder: "Select tags…" }
            }
            select::Content {
                select::Item { value: "rust", label: "Rust",
                    select::ItemText { "Rust" }
                    select::ItemIndicator { "✓" }
                }
                select::Item { value: "python", label: "Python",
                    select::ItemText { "Python" }
                    select::ItemIndicator { "✓" }
                }
            }
        }
    }
}

Data attributes

Attribute	Component	Values
data-select-state	Root	"open" | "closed"
data-select-disabled	Root	"true" (when disabled)
data-state	Trigger, Item	"open"/"closed" or "checked"/"unchecked"
data-highlighted	Item	"true" (when keyboard-focused)
data-disabled	Trigger, Item	"true" (when disabled)
data-select-placeholder	Value	"true" (when showing placeholder)
data-select-input	Input	"true"
data-select-content	Content	"true"
data-select-item-text	ItemText	"true"
data-select-item-indicator	ItemIndicator	"true"
data-select-group	Group	"true"
data-select-label	Label	"true"
data-select-separator	Separator	"true"
data-select-empty	Empty	"true"
data-select-clear	ClearButton	"true"

Keyboard navigation — Select-only

Key	Popup Closed	Popup Open
Space / Enter	Open popup	Select highlighted, close
Arrow Down	Open, next	Highlight next
Arrow Up	Open, prev	Highlight prev
Home	Open, first	Highlight first
End	Open, last	Highlight last
Escape	—	Close popup
Printable char	Type-ahead	Type-ahead

Keyboard navigation — Combobox

Key	Popup Closed	Popup Open
Arrow Down	Open, first	Highlight next
Arrow Up	—	Highlight prev
Alt+Arrow Down	Open	—
Enter	—	Select highlighted
Escape	—	Close popup
Home / End	Cursor	Cursor

Modules

select

Compound component namespace.

Structs

CustomFilter

GroupEntry

Registration entry for an option group.

ItemEntry

Registration entry for a single select option.

ScoredItem

An item paired with its fuzzy match score and highlight indices.

SelectContext

Shared context for the select compound component tree.

Enums

AutoComplete

Controls the autocomplete behaviour of an editable combobox.