Skip to main content

Form Controls

Checkbox

Native checkbox with custom indicator built from CSS pseudo-elements.

Element
<input>
Module
@basenative/components
Function
renderCheckbox

Quick start

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

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

renderCheckbox({ name: 'terms', label: 'I agree to the terms' });

Examples

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

Single checkbox

Native input[type=checkbox] with a custom indicator drawn by CSS.

Live render
Source
renderCheckbox({ name: 'terms', label: 'I agree to the terms' })

Reactive consent gate

A submit button disables itself until the checkbox is checked.

Live render
Source
const agreed = signal(false);
effect(() => submit.disabled = !agreed());

checkbox.onchange = (e) => agreed.set(e.target.checked);

Options

Arguments accepted by renderCheckbox().

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