Form Controls

Input

Text, email, password, and search inputs with label, help, and error states.

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

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

renderInput({ name: 'email', label: 'Email', type: 'email' });

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

Label, help text, and placeholder rendered into a <label> + <input>.

Live render

EmailWe will never share your email.

Source

renderInput({
  name: 'email',
  label: 'Email',
  type: 'email',
  placeholder: 'you@example.com',
  helpText: 'We will never share your email.',
})

aria-invalid="true" and an error message linked via aria-describedby.

Live render

UsernameMust be at least 3 characters.

Source

renderInput({
  name: 'username',
  label: 'Username',
  value: 'ab',
  error: 'Must be at least 3 characters.',
})

A signal mirrors the input length.

Live render

Bio

0 / 120

Source

const text = signal('');
effect(() => count.textContent = text().length + ' / 120');

input.oninput = (e) => text.set(e.target.value);

Arguments accepted by renderInput().

renderInput option reference
Option	Type	Default	Description
`name`	`string`	`—`	Form field name.
`label`	`string`	`—`	Visible field label.
`type`	`string`	`'text'`	HTML input type.
`value`	`string`	`''`	Initial value.
`placeholder`	`string`	`''`	Placeholder text.
`helpText`	`string`	`''`	Hint shown below the field.
`error`	`string`	`''`	Error message; sets aria-invalid="true".