Skip to content
zits/ui

Native Select

Overview

Section titled “Overview”

NativeSelect renders a plain <select> element styled to match the input field look; the caller’s <option> children render inside unchanged. There is no headless primitive underneath, since the platform’s own <select> already owns keyboard navigation, mobile pickers, and open/close behavior.

Install

Section titled “Install”
Terminal window
navius add native-select --to ./src/MyApp --namespace MyApp.Ui

Usage

Section titled “Usage”
@using Zits.Ui.Components


<ZitsNativeSelect class="w-[180px]">
    <option value="" disabled selected>Select a fruit</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
</ZitsNativeSelect>

Parts and props

Section titled “Parts and props”

NativeSelect is a single control with no part tree. ChildContent and every native <select> attribute (value, disabled, @bind-Value, …) pass through via Attributes unchanged; the component adds no prop of its own beyond the preset class set.

Styling surface

Section titled “Styling surface”

Attributes is merged with the preset class set via Cn.Merge, caller classes applied last. There is no variant/size parameter.

Data attribute hooks

Section titled “Data attribute hooks”

None: the component renders a bare <select> with no data-* hooks of its own.

NativeSelect is a native <select> element, so keyboard navigation, the mobile picker, and aria-* semantics come from the platform, not from any code in this component.