Skip to main content

Form Controls

Select

Native select with appearance: base-select progressive enhancement.

Element
<select>
Module
@basenative/components
Function
renderSelect

Quick start

Import the render function and call it from your server template.

import { renderSelect } from '@basenative/components';

renderSelect({ name: 'role', label: 'Role', items: ['Admin', 'Editor', 'Viewer'] });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Native select

Picks up appearance: base-select on supporting browsers, otherwise the platform select.

Live render
Source
renderSelect({ name: 'role', label: 'Role', items: ['Admin', 'Editor', 'Viewer'] })

Reactive selection

change events flow into a signal, the read-out updates synchronously.

Live render
No region selected
Source
const region = signal('');
effect(() => out.textContent = region() || 'No region selected');

select.onchange = (e) => region.set(e.target.value);

Options

Arguments accepted by renderSelect().

renderSelect option reference
Option Type Default Description
name string — Form field name.
label string — Visible field label.
items string[] | { value, label }[] — Option list.
placeholder string '' Empty-state option text.