Form Controls

Toggle

Switch-style checkbox with role="switch" and animated thumb.

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

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

renderToggle({ name: 'notifications', label: 'Email notifications' });

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

role="switch" — same data shape as checkbox, different semantics.

Live render

Email notifications

Source

renderToggle({ name: 'notifications', label: '...', checked: true })

Mirrors the toggle state into a data attribute on the demo container.

Live render

Dim mode

Source

const dim = signal(false);
effect(() => card.dataset.dim = dim() ? 'on' : 'off');

toggle.onchange = (e) => dim.set(e.target.checked);

Arguments accepted by renderToggle().

renderToggle option reference
Option	Type	Default	Description
`name`	`string`	`—`	Form field name.
`label`	`string`	`—`	Adjacent label text.
`checked`	`boolean`	`false`	Initial state.