Text input

function Example() {
    const name = signal("");
    return (
        <TextInput
            aria-label="Full name"
            placeholder="Ada Lovelace"
            value={name()}
            onInput={(e) => name.set((e.target as HTMLInputElement).value)}
        />
    );
}

function Example() {
    const message = signal("");
    return (
        <TextArea
            aria-label="Message"
            rows={3}
            placeholder="Tell us what happened…"
            value={message()}
            onInput={(e) => message.set((e.target as HTMLInputElement).value)}
        />
    );
}

function Example() {
    const seats = signal(5);
    return (
        <NumberInput aria-label="Seats" min={1} max={50} value={seats()} onChange={seats.set} />
    );
}

function Example() {
    const quantity = signal(2);
    return <QuantityInput min={1} max={10} value={quantity()} onChange={quantity.set} />;
}

function Example() {
    const password = signal("");
    return <PasswordInput aria-label="Password" value={password()} onChange={password.set} />;
}

<PasswordStrength password="correct horse" />

function Example() {
    const query = signal("");
    return (
        <SearchInput
            aria-label="Search projects"
            placeholder="Search projects"
            value={query()}
            onChange={query.set}
        />
    );
}

function Example() {
    const code = signal("");
    return (
        <>
            <PinInput
                aria-label="Verification code"
                length={6}
                value={code()}
                onChange={code.set}
            />
            <Text muted>{code().length === 6 ? `Verifying ${code()}…` : "Enter the 6-digit code."}</Text>
        </>
    );
}

function Example() {
    const topics = signal(["signals", "ssr"]);
    return (
        <TagsInput
            aria-label="Topics"
            placeholder="Add a topic and press Enter"
            value={topics()}
            onChange={topics.set}
        />
    );
}

<InputGroup>
    <InputAddon>https://</InputAddon>
    <TextInput aria-label="Subdomain" value="acme" />
    <InputAddon>.arachne.app</InputAddon>
</InputGroup>

<InputGroup>
    <InputAddon>$</InputAddon>
    <TextInput aria-label="Amount" value="49.00" />
</InputGroup>

function Example() {
    const name = signal("Marketing site");
    return <InlineEdit label="Project name" value={name()} onChange={name.set} />;
}

function Example() {
    const config = signal('{\n  "region": "fra1",\n  "replicas": 2\n}');
    return <JsonInput aria-label="Config JSON" value={config()} onChange={config.set} />;
}

<SecretField label="Webhook secret" value="whsec_9f2kQ83m1x" />

<CopyField label="API key" value="sk_live_51Hx…9fQ2" />