Skip to main content

Form Controls

Form Field

Compose a whole field in one call: name a built-in control (input, textarea, select, checkbox, radio, toggle) or pass pre-rendered markup, plus the shared label, help and error options.

Element
<div>
Module
@basenative/components
Function
renderFormField

Quick start

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

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

renderFormField({ control: 'input', name: 'email', label: 'Email', type: 'email', required: true });

Examples

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

Named controls, one call each

The composer forwards every other option to the named control’s renderer, so help text, errors and aria wiring behave exactly as the control documents.

Live render
You can change this later.
Alerts need an address first.
Source
renderFormField({
  control: 'select',
  name: 'plan',
  label: 'Plan',
  items: ['Starter', 'Growth'],
  helpText: 'You can change this later.',
})
renderFormField({ control: 'checkbox', name: 'tos', label: 'I agree to the terms' })
renderFormField({
  control: 'checkbox',
  name: 'alerts',
  label: 'Email me alerts',
  error: 'Alerts need an address first.',
})

Options

Arguments accepted by renderFormField().

renderFormField option reference
Option Type Default Description
control 'input' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'toggle' 'input' Which built-in control to render.
name string — Field name; also the default field id.
label string '' Field label (escaped text).
helpText string '' Hint under the control (escaped text).
error string '' Error message (escaped text).
controlHtml string — Pre-rendered control markup, wrapped in the field shell instead of a named control.