Form Controls

Radio Group

Grouped radio inputs inside a fieldset/legend with keyboard support.

Element: <fieldset>
Module: @basenative/components
Function: renderRadioGroup

Quick start

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

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

renderRadioGroup({ name: 'plan', label: 'Plan', items: ['Free', 'Pro', 'Enterprise'] });

Examples

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

Plan picker

Grouped radios inside a fieldset/legend.

Live render

PlanFreeProEnterprise

Source

renderRadioGroup({ name: 'plan', label: 'Plan', items: ['Free', 'Pro', 'Enterprise'], selected: 'Pro' })

Reactive description

A signal reads the selected radio and updates a description box.

Live render

Pricing tierFreeProEnterprise

Free — 5 projects, community support

Source

const TIERS = {
  Free:       '5 projects, community support',
  Pro:        'Unlimited projects, priority email',
  Enterprise: 'SLA, SAML SSO, dedicated CSM',
};

const tier = signal('Free');
effect(() => out.textContent = tier() + ' — ' + TIERS[tier()]);

Options

Arguments accepted by renderRadioGroup().

renderRadioGroup option reference
Option	Type	Default	Description
`name`	`string`	`—`	Shared input name.
`label`	`string`	`—`	Group legend.
`items`	`string[]`	`—`	Option labels.
`selected`	`string`	`''`	Initially selected.