Select

Overview

Select renders NaviusSelect, the headless primitive that owns value/open state and the listbox behavior, and composes NaviusSelectTrigger (with a trailing chevron), a portalled NaviusSelectPopup (scroll buttons + viewport), and NaviusSelectItem rows with a check indicator pinned to the right. The root is the single source of truth for value and open state: Value/Values/Open are forwarded to the primitive only when the consumer actually set them, so the uncontrolled DefaultValue/DefaultValues/DefaultOpen paths stay live (the always-controlled wart fix).

Install

navius add select --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsSelect @bind-Value="_value" Placeholder="Select a fruit">
    <ZitsSelectTrigger><ZitsSelectValue /></ZitsSelectTrigger>
    <ZitsSelectContent>
        <ZitsSelectGroup>
            <ZitsSelectLabel>Fruits</ZitsSelectLabel>
            <ZitsSelectItem Value="apple">Apple</ZitsSelectItem>
            <ZitsSelectItem Value="banana">Banana</ZitsSelectItem>
        </ZitsSelectGroup>
    </ZitsSelectContent>
</ZitsSelect>

@code {
    private string? _value;
}

Parts and props

Multiple, Placeholder, Disabled, Name, Required, and Dir (on ZitsSelect); Side, Align, SideOffset, and AlignOffset (on ZitsSelectContent, positioning the portalled popup); and Value, Disabled, TextValue (on ZitsSelectItem) all pass through to their respective Navius* parts unchanged. The styled wrapper adds:

Prop	Type	Default	Description
`Value`	`string?`	`null`	Controlled single-select value (root). Bind with `@bind-Value`; forwarded only when set.
`DefaultValue`	`string?`	`null`	Uncontrolled initial single-select value.
`Values`	`IReadOnlyList<string>`	`[]`	Controlled multi-select values (with `Multiple="true"`). Forwarded only when set.
`DefaultValues`	`IReadOnlyList<string>?`	`null`	Uncontrolled initial multi-select values.
`Open`	`bool`	`false`	Controlled popup open state. Forwarded only when set.
`DefaultOpen`	`bool`	`false`	Uncontrolled initial open state.

ZitsSelectValue, ZitsSelectGroup, ZitsSelectLabel, and ZitsSelectSeparator take no variant params of their own beyond ChildContent/Attributes pass-through.

Styling surface

Attributes on ZitsSelectContent’s popup and ZitsSelectItem/ZitsSelectLabel/ZitsSelectSeparator is merged with each part’s base class set via Cn.Merge, with the caller’s classes applied last.

Parameter	Values
`Side` (Content)	`top` · `bottom` · `left` · `right`
`Align` (Content)	`start` · `center` · `end`

Data attribute hooks

Part	Attribute	Description
Trigger	`data-placeholder`	Present when no value is selected, emitted by `NaviusSelectTrigger`.
Popup	`data-open` / `data-closed`	Animation-in/out state, emitted by `NaviusSelectPopup`.
Popup	`data-side`	The resolved popover side, emitted by `NaviusSelectPopup`.
Item	`data-highlighted`	Present on the virtually-focused item, emitted by `NaviusSelectItem`.
Item	`data-disabled`	Present when `Disabled` is true, emitted by `NaviusSelectItem`.

Underlying primitives

NaviusSelect