Documentation Index
Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
Use this file to discover all available pages before exploring further.
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;
Placeholder text displayed when the field is empty.
The current text value of the field.
setText
(text: string) => void
required
Callback invoked when the user types. Use this to update your state.
const body = () => {
const [name, setName] = useState("")
return TextField({
placeholder: "Enter your name",
text: name,
setText: setName
})
}
const body = () => {
const [email, setEmail] = useState("")
return TextField({
placeholder: "Email address",
text: email,
setText: setEmail
})
.textFieldStyle("roundedBorder")
.keyboardType("emailAddress")
.autocorrectionDisabled(true)
.padding(16)
}
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;
Placeholder text displayed when the field is empty.
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.
const body = () => {
const [password, setPassword] = useState("")
return SecureField({
placeholder: "Password",
text: password,
setText: setPassword
})
}
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;
The current text content displayed in the editor.
setText
(text: string) => void
required
Callback invoked when the user edits the text. Use this to update your state.
const body = () => {
const [text, setText] = useState("")
return TextEditor({ text, setText })
}
const body = () => {
const [notes, setNotes] = useState("")
return TextEditor({ text: notes, setText: setNotes })
.frame({ minHeight: 200 })
.padding(8)
.border(Color("gray"), 1)
.cornerRadius(8)
}
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)
}
See also
- Text — read-only text display
- Button — submit form actions
- Toggle — boolean switch alongside fields in a form
- VStack — vertical layout for stacking form fields
