Form Controls

Textarea

Auto-sizing textarea with field-sizing: content and a vertical resize handle.

Element: <textarea>
Module: @basenative/components
Function: renderTextarea

Quick start

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

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

renderTextarea({ name: 'message', label: 'Message', rows: 3 });

Examples

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

Auto-sizing

field-sizing: content lets the textarea grow with its value.

Live render

Message

Source

renderTextarea({ name: 'message', label: 'Message', rows: 3 })

Live word count

A signal recomputes on every input event.

Live render

Thoughts

0 words · 0 chars

Source

const text  = signal('');
const words = computed(() => text().trim().split(/\s+/).filter(Boolean).length);

effect(() => out.textContent = words() + ' words · ' + text().length + ' chars');

Options

Arguments accepted by renderTextarea().

renderTextarea option reference
Option	Type	Default	Description
`name`	`string`	`—`	Form field name.
`label`	`string`	`—`	Visible field label.
`rows`	`number`	`3`	Initial visible rows.
`value`	`string`	`''`	Initial value.
`placeholder`	`string`	`''`	Placeholder text.