Skip to main content
SecureField(props: { placeholder?: string; text: string; setText: (text: string) => void }): Component;

​
Parameters

​
props.placeholder
string
Optional placeholder text displayed when the field is empty.
​
props.text
string
The current text value of the field (will be masked).
​
props.setText
(text: string) => void
Function called when the text changes.

​
Support

​
Usage

​
Basic secure field

const [password, setPassword] = useState("")

SecureField({
    placeholder: "Enter password",
    text: password,
    setText: setPassword
})

​
Login form

const [username, setUsername] = useState("")
const [password, setPassword] = useState("")

VStack({ spacing: 16 }, [
    TextField({
        placeholder: "Username",
        text: username,
        setText: setUsername
    }),
    
    SecureField({
        placeholder: "Password",
        text: password,
        setText: setPassword
    }),
    
    Button("Login", () => {
        console.log("Logging in with:", username)
    })
    .disabled(username === "" || password === "")
])

​
Password confirmation

const [password, setPassword] = useState("")
const [confirmPassword, setConfirmPassword] = useState("")
const passwordsMatch = password === confirmPassword && password !== ""

VStack({ spacing: 12 }, [
    SecureField({
        placeholder: "New Password",
        text: password,
        setText: setPassword
    }),
    
    SecureField({
        placeholder: "Confirm Password",
        text: confirmPassword,
        setText: setConfirmPassword
    })
    .border(confirmPassword !== "" && !passwordsMatch ? Color("red") : Color("gray")),
    
    if (confirmPassword !== "" && !passwordsMatch) {
        Text("Passwords do not match")
            .foregroundStyle(Color("red"))
            .font("caption")
    },
    
    Button("Create Account", () => {})
        .disabled(!passwordsMatch)
])