Skip to main content
SecureField(props: {
    placeholder?: string;
    text: string;
    setText: (text: string) => void;
}): Component;
placeholder
string
Placeholder text displayed when the field is empty.
text
string
required
The current text value of the field (displayed as masked characters).
setText
(text: string) => void
required
Callback invoked when the user types. Use this to update your state.

Support

Usage

Basic password field

const body = () => {
    const [password, setPassword] = useState("")
    return SecureField({
        placeholder: "Password",
        text: password,
        setText: setPassword
    })
}

Login form

const body = () => {
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")
    return VStack({ spacing: 16 }, [
        TextField({
            placeholder: "Email",
            text: email,
            setText: setEmail
        })
            .textFieldStyle("roundedBorder"),
        SecureField({
            placeholder: "Password",
            text: password,
            setText: setPassword
        })
            .textFieldStyle("roundedBorder"),
        Button("Sign In", () => {})
            .disabled(email === "" || password === "")
    ])
        .padding(24)
}

See Also