Components

TextField

Edit a single line of text using a native input.

Example

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

Default

Loading preview…

Code
'use client';
import { TextField } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
export default function Example() {
    return ((<VStack spacing={16}>
      <TextField placeholder="Enter text here"/>
      <TextField placeholder="Disabled field" disabled/>
      <TextField placeholder="Email" type="email"/>
    </VStack>));
}

With Value

Control the text field value:

Usage and limitations

  • Controlled: value and onValueChange (string) or onChange (native event). Uncontrolled: defaultValue.
  • Supports native text-entry types such as text, email, tel, url, search and password, plus disabled and placeholder.
  • Provide a visible/accessible label; a placeholder is only a hint. Validate on blur or submit, explain errors, and check mobile keyboard/autofill behavior.

More examples

With Value

API reference

PropTypeRequiredDescription
valuestringNoThe current value of the text field.
onChange(event: React.ChangeEvent<HTMLInputElement>) => voidNoCallback fired when the value changes.
placeholderstringNoPlaceholder text displayed when the field is empty.
disabledbooleanNoWhether the text field is disabled. Default: false
type'text' | 'email' | 'tel' | 'url' | 'search' | 'password'NoThe type of input. Defaults to 'text'. Default: 'text'

Inherits additional props from Omit<IBaseElementComponent<'input'>, 'type' | 'children'>.

Edit this page on GitHubReport an issue

TextEditor

Edit multiline text in a native textarea.

TextSelection

TextSelection adapts SwiftUI's `textSelection(_:)` modifier into an explicit wrapper that controls browser text selection semantics.