TextField

TextField is a text input. Maps to UI Toolkit's TextField.

Import

import { TextField } from "onejs-react"

Basic Usage

function NameInput() {
    const [name, setName] = useState("")

    return (
        <TextField
            value={name}
            onChange={(e) => setName(e.value)}
            placeholder="Enter your name"
        />
    )
}

Props

Prop	Type	Description
`value`	`string`	Current text value
`placeholder`	`string`	Placeholder text
`multiline`	`boolean`	Enable multiline input
`readOnly`	`boolean`	Make field read-only
`maxLength`	`number`	Maximum character count
`style`	`ViewStyle`	Inline styles
`className`	`string`	USS class name(s)
`onChange`	`(e) => void`	Value change handler
`onFocus`	`(e) => void`	Focus handler
`onBlur`	`(e) => void`	Blur handler

Controlled Input

function SearchBox() {
    const [query, setQuery] = useState("")

    const handleSearch = () => {
        console.log("Searching for:", query)
    }

    return (
        <View style={{ flexDirection: "row" }}>
            <TextField
                value={query}
                onChange={(e) => setQuery(e.value)}
                placeholder="Search..."
                style={{ flexGrow: 1, marginRight: 10 }}
            />
            <Button text="Search" onClick={handleSearch} />
        </View>
    )
}

Multiline

<TextField
    value={description}
    onChange={(e) => setDescription(e.value)}
    placeholder="Enter description..."
    multiline={true}
    style={{ height: 100 }}
/>

Validation

function EmailInput() {
    const [email, setEmail] = useState("")
    const [error, setError] = useState("")

    const validate = (value) => {
        if (!value.includes("@")) {
            setError("Please enter a valid email")
        } else {
            setError("")
        }
    }

    return (
        <View>
            <TextField
                value={email}
                onChange={(e) => {
                    setEmail(e.value)
                    validate(e.value)
                }}
                placeholder="Email address"
                style={{
                    borderColor: error ? "#ff0000" : "#333",
                }}
            />
            {error && <Label text={error} style={{ color: "#ff0000", fontSize: 12 }} />}
        </View>
    )
}

Password Field

function PasswordInput() {
    const [password, setPassword] = useState("")

    return (
        <TextField
            value={password}
            onChange={(e) => setPassword(e.value)}
            placeholder="Password"
            // Note: UI Toolkit doesn't have a built-in password mask
            // You'd need to implement this with a custom element or USS
        />
    )
}

Styled Input

<TextField
    value={text}
    onChange={(e) => setText(e.value)}
    style={{
        backgroundColor: "#2a2a2a",
        borderWidth: 1,
        borderColor: "#444",
        borderRadius: 4,
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 12,
        paddingRight: 12,
        fontSize: 16,
        color: "#ffffff",
    }}
/>