Form Controls

Field

The form-field unit: label, control, help text and error composed as one piece of markup, with the help/error ids the controls’ aria-describedby points at.

Element: <div>
Module: @basenative/components
Function: renderField

Quick start

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

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

renderField({
  id: 'email',
  label: 'Email',
  control: '<input id="email" name="email" type="email" />',
  helpText: 'We never share it.',
});

Examples

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

Label, control, help and error as one unit

The shell wraps any pre-rendered control; the help and error spans carry the ids the control’s aria-describedby names.

Live render

EmailWe never share it.Enter a valid address.

Source

renderField({
  id: 'email',
  label: 'Email',
  control: '<input data-bn="input" id="email" name="email" type="email" aria-describedby="email-help email-error" aria-invalid="true" />',
  helpText: 'We never share it.',
  error: 'Enter a valid address.',
})

Options

Arguments accepted by renderField().

renderField option reference
Option	Type	Default	Description
`id`	`string`	`—`	Field id; help and error ids derive from it.
`label`	`string`	`''`	Visible label (escaped text).
`control`	`string`	`—`	Pre-rendered control markup (HTML slot).
`helpText`	`string`	`''`	Hint under the control (escaped text).
`error`	`string`	`''`	Error message with role="alert" (escaped text).