Skip to main content
.textFieldStyle(style: "roundedBorder" | "plain" | "automatic"): Component
​
style
"roundedBorder" | "plain" | "automatic"
required
The text field style:
  • "roundedBorder" — displays a rounded border around the field
  • "plain" — no visible border or background
  • "automatic" — uses the platform default style

​
Support

​
Usage

​
Rounded border style

const body = () => {
    const [name, setName] = useState("")
    return TextField("Name", { text: name, setText: setName })
        .textFieldStyle("roundedBorder")
}

​
Plain style

const body = () => {
    const [query, setQuery] = useState("")
    return TextField("Search", { text: query, setText: setQuery })
        .textFieldStyle("plain")
}

​
Form with styled fields

const body = () => {
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")
    return VStack({ spacing: 12 }, [
        TextField("Email", { text: email, setText: setEmail })
            .textFieldStyle("roundedBorder")
            .keyboardType("emailAddress"),
        SecureField("Password", { text: password, setText: setPassword })
            .textFieldStyle("roundedBorder"),
    ]).padding(16)
}