Scripting
Documentation
Changelog
Privacy
Documentation
Changelog
Privacy

SecureField

The SecureField component in Scripting provides a secure, private text input field intended for entering sensitive information such as passwords. The entered text is visually obscured and not displayed in plain text, mirroring the behavior of SwiftUI’s SecureField.

This component is useful in authentication forms, PIN inputs, or any context where user privacy is essential.

Props

1type SecureFieldProps = (
2  | { title: string }
3  | { label: VirtualNode }
4) & {
5  value: string
6  onChanged: (value: string) => void
7  prompt?: string
8  autofocus?: boolean
9  onFocus?: () => void
10  onBlur?: () => void
11}

Property Descriptions

Property Type Description
title string A simple string label displayed with the field. (Use either title or label)
label VirtualNode A custom view node label. (Use instead of title)
value string The current value of the secure text field.
onChanged (value: string) => void Callback function invoked when the value changes.
prompt string (optional) A placeholder prompt shown when the field is empty.
autofocus boolean (optional) Automatically focuses the field on mount. Defaults to false.
onFocus () => void (optional) Callback triggered when the field receives focus.
onBlur () => void (optional) Callback triggered when the field loses focus.

Example

1import { useState, VStack, SecureField } from "scripting"
2
3function LoginForm() {
4  const [password, setPassword] = useState("")
5
6  return <VStack padding>
7    <SecureField
8      title="Password"
9      value={password}
10      onChanged={setPassword}
11      prompt="Enter your password"
12    />
13  </VStack>
14}

In this example:

  • A secure input field is used to capture a password.
  • The input is visually hidden to ensure privacy.
  • The prompt guides the user when no text is entered.

Notes

  • Either title or label must be provided (but not both).
  • The field behaves similarly to TextField, with added security features for sensitive input.
  • This component is suitable for use in login, signup, and settings forms where password entry is required.
Outline