iOS Text and Fields

Text, Label, TextField, SecureField, and TextEditor under One.iOS

Text display and text entry under One.iOS, drawn by SwiftUI.

• TextField, SecureField, and TextEditor take a string or a NativeState handle, so typing stays correct without a React render.
• Focus is controlled with focused, onFocusChange, and focusRevision.
• Keyboard, autocapitalization, and AutoFill hints map to UIKit.
• These views throw outside iOS. For a field that also runs on Android and web, use One.UI.TextInput.

Usage

import { One, useNativeState } from 'one'

export function SignIn() {
  const email = useNativeState('')
  const password = useNativeState('')

  return (
    <One.iOS.Form style={{ flex: 1 }}>
      <One.iOS.Section>
        <One.iOS.TextField
          label="Email"
          prompt="you@example.com"
          text={email}
          onTextChange={(value) => email.set(value)}
          keyboardType="emailAddress"
          textContentType="username"
          textInputAutocapitalization="never"
          submitLabel="next"
        />
        <One.iOS.SecureField
          label="Password"
          prompt="Password"
          text={password}
          onTextChange={(value) => password.set(value)}
          textContentType="password"
          submitLabel="go"
          onSubmit={signIn}
        />
      </One.iOS.Section>
    </One.iOS.Form>
  )
}

Every view on this page also accepts accessibilityLabel, accessibilityHint, accessibilityValue, testID, style, onLayout, and swiftStyle.

TextField

One.iOS.TextField is a single line field, or a growing multi-line field with axis="vertical".

SecureField

One.iOS.SecureField obscures its input for passwords. It has the same props as TextField except axis.

TextEditor

One.iOS.TextEditor is SwiftUI’s multi-line editor. Return inserts a newline, and the editor scrolls its text inside its box, so give it a height. SwiftUI’s editor has no label, placeholder, style, or submit; name it with accessibilityLabel.

<One.iOS.TextEditor
  text={notes}
  onTextChange={setNotes}
  accessibilityLabel="Notes"
  style={{ height: 160 }}
/>

Text

One.iOS.Text renders one string.

Label

One.iOS.Label renders a title with an SF Symbol.

<One.iOS.Label label="Favorites" systemImage="star" />