Edit profile settings

Text, select, and textarea fields in one form.

Complete the Forms setup first, or use the configuration, middleware, and layout files in the sidebar. Install @astro-utils/forms and @astrojs/node in an existing Astro project.

Try the interaction

Change the name, language, and bio, then save. In your own project, reload the page to see the session-backed values restored.

src/layouts/Layout.astro

---
import { WebForms } from '@astro-utils/forms/forms.js';
---
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <title><slot name="title" /></title>
    </head>
    <body>
        <WebForms>
            <slot />
        </WebForms>
    </body>
</html>

src/pages/settings.astro

---
import { BButton, BInput, BOption, BSelect, BTextarea, Bind, BindForm, FormErrors } from '@astro-utils/forms/forms.js';
import Layout from '../layouts/Layout.astro';

type Preferences = { name: string; locale: string; bio: string };

const bind = Bind<Preferences>(Astro.locals.session.preferences ?? { name: 'Ari Chen', locale: 'en', bio: '' });
let saved = false;

function savePreferences() {
    Astro.locals.session.preferences = { name: bind.name, locale: bind.locale, bio: bind.bio };
    saved = true;
}
---
<Layout>
    <span slot="title">Edit profile settings</span>
    <BindForm {bind}>
        <FormErrors />

        {saved && <p role="status">Preferences saved.</p>}

        <label for="name">Display name</label>
        <BInput id="name" name="name" maxlength={40} required />

        <label for="locale">Language</label>
        <BSelect id="locale" name="locale">
            <BOption value="en">English</BOption>
            <BOption value="es">Spanish</BOption>
            <BOption value="fr">French</BOption>
        </BSelect>

        <label for="bio">Bio</label>
        <BTextarea id="bio" name="bio" maxlength={180} />

        <BButton onClick={savePreferences} whenFormOK>Save changes</BButton>
    </BindForm>
</Layout>

astro.config.mjs

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
import forms from '@astro-utils/forms/dist/integration.js';

export default defineConfig({
    output: 'server',
    adapter: node({ mode: 'standalone' }),
    integrations: [forms]
});

Preview Interactive demo

How it works

The source reads and writes a small preferences object through Astro.locals.session. The embedded preview only demonstrates the controls and save feedback. Use application storage for preferences that must survive session expiry or work across devices.

Continue

Explore the input component reference.