TextField#

The TextField component in the Scripting app provides a declarative way to create a text input field, similar to SwiftUI’s TextField. It supports both single-line and multiline input, custom labels, placeholder prompts, scroll direction, focus handling, and line constraints.

This component is ideal for collecting short inputs like usernames or longer inputs like messages, with seamless integration into reactive view hierarchies.

Props#

1type TextFieldProps = (
2  | { title: string }
3  | { label: VirtualNode }
4) & {
5  value: string
6  onChanged: (value: string) => void
7  prompt?: string
8  axis?: Axis
9  autofocus?: boolean
10  onFocus?: () => void
11  onBlur?: () => void
12}

Property Details#

Example: Multiline, Vertically Scrollable TextField#

1import { useState, VStack, TextField } from "scripting"
2
3function ScrollableTextInput() {
4  const [text, setText] = useState("")
5
6  return <VStack padding>
7    <TextField
8      title="Message"
9      value={text}
10      onChanged={setText}
11      prompt="Enter your message"
12      axis="vertical"
13      lineLimit={{ min: 3, max: 8 }}
14    />
15  </VStack>
16}

Behavior#

• The field grows from 3 to 8 lines in height as text is entered.
• When content exceeds 8 lines, it becomes scrollable.
• The prompt is shown as placeholder text until input is provided.

Example: Basic Single-Line TextField#

1import { useState, VStack, TextField, Text } from "scripting"
2
3function UsernameInput() {
4  const [username, setUsername] = useState("")
5
6  return <VStack padding>
7    <TextField
8      title="Username"
9      value={username}
10      onChanged={setUsername}
11      prompt="Enter your username"
12    />
13    <Text>Username: {username}</Text>
14  </VStack>
15}

Notes#

• You must provide either title or label, not both.
• For multiline input, set axis="vertical" and define a lineLimit.
• TextField integrates seamlessly with state hooks like useState to enable real-time reactivity.
• Focus and blur events are helpful for validating or tracking input behavior.