iOS Text and Fields

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

One.iOS text display and entry are SwiftUI’s own views: Text, Label, TextField, SecureField, and TextEditor, each in a Fabric view with the field state kept in a native model. The fields take a plain string or a NativeState handle, and focus is controlled through props. Keyboard, autocapitalization, AutoFill, and style options are SwiftUI modifiers set through swiftStyle.

Reach for these when a screen is iOS only and should feel like the system: form labels, field styles, and the native return key. For a field that also runs on Android and web, use One.UI.TextInput instead.

Usage

import { One, useNativeState } from 'one'

export function SignIn({ signIn }: { signIn: () => void }) {
  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)}
          swiftStyle={{
            keyboardType: 'emailAddress',
            textContentType: 'username',
            textInputAutocapitalization: 'never',
            submitLabel: 'next',
          }}
        />
        <One.iOS.SecureField
          label="Password"
          prompt="Password"
          text={password}
          onTextChange={(value) => password.set(value)}
          swiftStyle={{ textContentType: 'password', submitLabel: 'go' }}
          onSubmit={signIn}
        />
      </One.iOS.Section>
    </One.iOS.Form>
  )
}

Each field binds to a handle, so typing writes native memory directly and the component re-renders with the new value. The username and password content types mark the pair as a login form for AutoFill.

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

How it works

The text lives in the native field’s model, which keeps the value plus an event count and a revision. Each keystroke bumps the count and reports the new text; JavaScript writes it into the bound handle, calls the change handler, and acknowledges the event. Writes through the handle converge silently with no echo back. Passing a new text with an increased revision resets the field from the outside; without the bump, an unacknowledged native edit wins.

Focus works the same way as a second controlled value with its own revision: set focused to move focus in or out, read moves through onFocusChange. axis and the swiftStyle modifiers take SwiftUI names checked against the device’s iOS version.

TextField

TextField is a single line field, or a growing multi-line field with axis="vertical", which SwiftUI expands as text wraps.

import { One, useNativeState } from 'one'

function Nickname() {
  const name = useNativeState('')

  return (
    <One.iOS.TextField
      label="Nickname"
      prompt="Ada"
      text={name}
      onTextChange={(value) => name.set(value)}
      swiftStyle={{ textFieldStyle: 'roundedBorder' }}
    />
  )
}

For a multiline field that grows from one to five lines, use the range overload:

<One.iOS.TextField
  label="Message"
  text={message}
  onTextChange={(value) => message.set(value)}
  axis="vertical"
  swiftStyle={{ lineLimitWithClosedRange: { limit: { lower: 1, upper: 5 } } }}
/>

Here message is a string handle from useNativeState. Range bounds are integers with lower <= upper. For a single maximum, the existing lineLimitWithOptionalInt: 5 modifier remains available.

textFieldStyle, submitLabel, textInputAutocapitalization, autocorrectionDisabled, keyboardType, textContentType, and disabled are SwiftUI modifiers set through swiftStyle. keyboardType and textContentType take SwiftUI’s case names, such as URL or oneTimeCode, and a textContentType of null means none.

SecureField

SecureField obscures its input for passwords. It takes the same props as TextField except axis.

import { One, useNativeState } from 'one'

function Password({ signIn }: { signIn: () => void }) {
  const password = useNativeState('')

  return (
    <One.iOS.SecureField
      label="Password"
      prompt="Password"
      text={password}
      onTextChange={(value) => password.set(value)}
      swiftStyle={{ textContentType: 'password', submitLabel: 'go' }}
      onSubmit={signIn}
    />
  )
}

SecureField takes the same swiftStyle modifiers as TextField.

TextEditor

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

import { One, useNativeState } from 'one'

function Notes() {
  const notes = useNativeState('')

  return (
    <One.iOS.TextEditor
      text={notes}
      onTextChange={(value) => notes.set(value)}
      accessibilityLabel="Notes"
      style={{ height: 160 }}
    />
  )
}

textInputAutocapitalization, autocorrectionDisabled, keyboardType, textContentType, and disabled are SwiftUI modifiers set through swiftStyle.

Text

Text renders one string.

import { One } from 'one'

function Greeting({ name }: { name: string }) {
  return <One.iOS.Text text={`Hello, ${name}`} />
}

Label

Label renders a title with an SF Symbol.

import { One } from 'one'

function Favorite() {
  return <One.iOS.Label label="Favorites" systemImage="star" />
}

Disable a label with swiftStyle={{ disabled: true }}.

Platform differences

Limits and gotchas

• Reset text with a revision bump. A new text alone loses to an unacknowledged native edit; increase revision with it to reset the field from the outside. Revisions must be nonnegative Int32 values.
• Pick one focus owner. Setting both focused and swiftStyle.focused throws; use one or the other.
• Style names are checked. Unknown SwiftUI names throw, as do styles that need a newer iOS than the device runs.
• SecureField is one line. SwiftUI’s SecureField takes no axis, so it has no multi-line mode.