Forms

function Example() {
    const project = signal("marketing-site");
    const invalid = () => !/^[a-z0-9-]+$/.test(project());
    return (
        <FormField
            label="Project name"
            labelFor="field-project"
            help="Lowercase letters, numbers and dashes."
            error={invalid() ? "Use only lowercase letters, numbers and dashes." : undefined}
        >
            <TextInput
                id="field-project"
                invalid={invalid()}
                value={project()}
                onInput={(e) => project.set((e.target as HTMLInputElement).value)}
            />
        </FormField>
    );
}

function Example() {
    const email = signal("");
    return (
        <FormField label="Email" labelFor="control-email">
            <Control expanded>
                <TextInput
                    id="control-email"
                    type="email"
                    placeholder="[email protected]"
                    value={email()}
                    onInput={(e) => email.set((e.target as HTMLInputElement).value)}
                />
            </Control>
        </FormField>
    );
}

function Example() {
    const user = signal("ada");
    const taken = () => ["admin", "root"].includes(user());
    return (
        <FormField label="Username" labelFor="help-user">
            <TextInput
                id="help-user"
                value={user()}
                onInput={(e) => user.set((e.target as HTMLInputElement).value)}
            />
            <Help tone={taken() ? "danger" : "success"}>
                {taken() ? "That username is taken." : "This username is available."}
            </Help>
        </FormField>
    );
}

<Label for="project-name">
    Project name
</Label>

function Example() {
    const name = signal("Ada Lovelace");
    return (
        <FormSection title="Profile" description="Shown on your public page.">
            <FormField label="Display name" labelFor="section-name">
                <TextInput
                    id="section-name"
                    value={name()}
                    onInput={(e) => name.set((e.target as HTMLInputElement).value)}
                />
            </FormField>
        </FormSection>
    );
}

function Example() {
    const failed = signal(true);
    const weekly = signal(false);
    return (
        <FormArea
            order={3}
            title="Notifications"
            description="Choose what we email you about."
            bordered
        >
            <Checkbox
                label="Failed deploys"
                checked={failed()}
                onChange={(e) => failed.set((e.target as HTMLInputElement).checked)}
            />
            <Checkbox
                label="Weekly summary"
                checked={weekly()}
                onChange={(e) => weekly.set((e.target as HTMLInputElement).checked)}
            />
        </FormArea>
    );
}

function Example() {
    const street = signal("");
    const city = signal("");
    return (
        <Fieldset legend="Shipping address">
            <FormField label="Street" labelFor="fs-street">
                <TextInput
                    id="fs-street"
                    value={street()}
                    onInput={(e) => street.set((e.target as HTMLInputElement).value)}
                />
            </FormField>
            <FormField label="City" labelFor="fs-city">
                <TextInput
                    id="fs-city"
                    value={city()}
                    onInput={(e) => city.set((e.target as HTMLInputElement).value)}
                />
            </FormField>
        </Fieldset>
    );
}

<form
    onSubmit={(e: SubmitEvent) => {
        e.preventDefault();
        () => {}();
    }}
>
    <FormFooter>
        <Button variant="ghost" onClick={() => {}}>
            Cancel
        </Button>
        <Button type="submit">Save changes</Button>
    </FormFooter>
</form>

<SettingsRow
    label="Default branch"
    description="Pushes to this branch deploy to production."
    control={<Code>main</Code>}
/>

function Example() {
    const previews = signal(true);
    return (
        <ToggleRow
            label="Preview deploys"
            description="Deploy every pull request to a unique URL."
            checked={previews()}
            onChange={previews.set}
        />
    );
}

<DangerZone
    title="Delete project"
    description="This permanently removes all deploys and domains."
>
    <Button variant="danger" onClick={() => {}}>
        Delete marketing-site
    </Button>
</DangerZone>

function Example() {
    const steps = ["Account", "Team", "Billing", "Done"];
    const step = signal(0);
    return (
        <Stack gap="0.75rem">
            <Text>
                Step {step() + 1} of {steps.length}: <strong>{steps[step()]}</strong>
            </Text>
            <WizardNav
                canBack={step() > 0}
                canNext={step() < steps.length - 1}
                nextLabel={step() === steps.length - 2 ? "Finish" : "Continue"}
                onBack={() => step.set(step() - 1)}
                onNext={() => step.set(step() + 1)}
            />
        </Stack>
    );
}