Components

TextEditor

Edit multiline text in a native textarea.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { TextEditor } from '@swiftuijs/ui';
export default function Example() {
    return (<TextEditor aria-label="Notes" defaultValue="Start with a draft here..." placeholder="Enter notes..."></TextEditor>);
}

Controlled Usage

Use value with onValueChange when the parent owns the text state:

Content Sizing

When rows is omitted, TextEditor derives a sensible row count from explicit line breaks in the current content and keeps it between 3 and 8 rows:

Read Only

TextEditor can be displayed as read only:

Usage and limitations

  • Controlled: value; uncontrolled: defaultValue. Choose one mode and keep it consistent.
  • onChange receives the native event; onValueChange receives the latest string.
  • rows sets a fixed row count; otherwise explicit line breaks determine 3–8 rows. placeholder, disabled, and readOnly retain native behavior.
  • Provide an associated HTML label or aria-label. Validate length/content at the form level; native keyboard and assistive-technology semantics are preserved.

More examples

Controlled Usage
Content Sizing
Read Only
Disabled State

API reference

PropTypeRequiredDescription
valuestringNoThe current value of the editor.
defaultValuestringNoThe initial value of the editor when uncontrolled.
onChangeChangeEventHandler<HTMLTextAreaElement>NoNative textarea change handler.
onValueChange(value: string) => voidNoValue-first change handler for SwiftUI-style ergonomics.
placeholderstringNoPlaceholder text
rowsnumberNoNative textarea row count. When omitted, TextEditor grows with content and keeps a sensible size between 3 and 8 rows based on its current content.

Inherits additional props from Omit<IBaseElementComponent<'textarea'>, 'children' | 'value' | 'defaultValue' | 'onChange'>.

Edit this page on GitHubReport an issue

Text

Display inline text with optional line truncation.

TextField

Edit a single line of text using a native input.