Components / Native Select

Native Select

A styled native <select> with the input-like look. Pure Tailwind on the brain's attribute seam; no behaviour required. Use it when you want the platform's own dropdown (mobile pickers, accessibility, zero JS) rather than the custom ZitsSelect.

Examples

Pass <option> children just like a real select. Every native attribute (value, disabled, @bind-Value) is splatted through.

razor

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

With label

Compose with ZitsLabel for a fully-labelled field.

Plan

razor

<div class="grid w-full max-w-sm items-center gap-1.5">
    <ZitsLabel For="plan">Plan</ZitsLabel>
    <ZitsNativeSelect id="plan">
        <option value="free">Free</option>
        <option value="pro">Pro</option>
        <option value="enterprise">Enterprise</option>
    </ZitsNativeSelect>
</div>

Installation

Copy the component source into your project with the CLI.

Terminal bash

navius add native-select

API reference

Prop	Type	Default
ChildContent	RenderFragment?	-
Attributes	splatted	-