Text input

TextField is the standard single-line input. SecureField is the same shape but obscures its contents for passwords and other sensitive data. TextEditor is a multi-line editing area for longer-form text. All three follow the same controlled-input pattern: pass the current text value and a setText callback. Style them with shared modifiers like .textFieldStyle(), .keyboardType(), and .autocorrectionDisabled().

TextField

A single-line text input field with an optional placeholder.

TextField(props: {
    placeholder?: string;
    text: string;
    setText: (text: string) => void;
}): Component;

string

Placeholder text displayed when the field is empty.

string

required

The current text value of the field.

(text: string) => void

required

Callback invoked when the user types. Use this to update your state.

Basic text field

const body = () => {
    const [name, setName] = useState("")
    return TextField({
        placeholder: "Enter your name",
        text: name,
        setText: setName
    })
}

With style modifiers

const body = () => {
    const [email, setEmail] = useState("")
    return TextField({
        placeholder: "Email address",
        text: email,
        setText: setEmail
    })
        .textFieldStyle("roundedBorder")
        .keyboardType("emailAddress")
        .autocorrectionDisabled(true)
        .padding(16)
}

Form with multiple fields

const body = () => {
    const [first, setFirst] = useState("")
    const [last, setLast] = useState("")
    return VStack({ spacing: 12 }, [
        TextField({ placeholder: "First name", text: first, setText: setFirst }),
        TextField({ placeholder: "Last name", text: last, setText: setLast }),
        Button("Submit", () => {})
    ])
        .padding(16)
}

SecureField

A text input that obscures its contents, used for passwords and sensitive data.

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

string

Placeholder text displayed when the field is empty.

string

required

The current text value of the field (displayed as masked characters).

(text: string) => void

required

Callback invoked when the user types. Use this to update your state.

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)
}

TextEditor

A multi-line text editing area for longer form text input.

TextEditor(props: { text: string; setText: (text: string) => void }): Component;

string

required

The current text content displayed in the editor.

(text: string) => void

required

Callback invoked when the user edits the text. Use this to update your state.

Basic text editor

const body = () => {
    const [text, setText] = useState("")
    return TextEditor({ text, setText })
}

With frame and border

const body = () => {
    const [notes, setNotes] = useState("")
    return TextEditor({ text: notes, setText: setNotes })
        .frame({ minHeight: 200 })
        .padding(8)
        .border(Color("gray"), 1)
        .cornerRadius(8)
}

In a form layout

const body = () => {
    const [title, setTitle] = useState("")
    const [body, setBody] = useState("")
    return VStack({ spacing: 16 }, [
        TextField({ placeholder: "Title", text: title, setText: setTitle }),
        TextEditor({ text: body, setText: setBody })
            .frame({ minHeight: 300 }),
        Button("Submit", () => {})
    ])
        .padding(16)
}

Introduction

Authoring

Components

Components — iOS Extensions

Components — Web Extensions

Modifiers

Modifiers — iOS Extensions

Hooks and Globals

Styles

Types

TextField

SecureField

TextEditor

See also

​TextField

​SecureField

​TextEditor

​See also

TextField

SecureField

TextEditor

See also