Koala UI

Settings Form

An account-profile editing block: an avatar with change and remove controls, a name row, a prefixed username, email and a bio with a live count, closed by a Cancel and Save footer.

Profile

This information will be displayed publicly on your profile.

JC

JPG, GIF or PNG. 2MB max.

koalaui.com/

Used for sign-in and notifications.

Brief, appears under your name.

47 / 160

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Add this component (its dependencies come along)npx koalaui-cli@latest add settings-form

Usage#

usage.tsxTSX
"use client"import { SettingsForm, type SettingsFormData } from "@/components/ui/settings-form"export function Example() {  async function save(data: SettingsFormData) {    await fetch("/api/profile", { method: "PATCH", body: JSON.stringify(data) })  }  return (    <SettingsForm      defaultValues={{ firstName: "Ana", lastName: "Ruiz", email: "ana@koalaui.com" }}      onSave={save}    />  )}

API reference#

SettingsForm

Composes Avatar, Field, Input, and Textarea. The root is a <form> that forwards all its props.

  • defaultValues: Partial<{ firstName, lastName, username, email, bio }>.
  • onSave: (data: SettingsFormData) => void | Promise<void>; onCancel: () => void.
  • avatarSrc, usernamePrefix (default "koalaui.com/"), title, description.

FAQ#

Reach for `SettingsForm` when you need the standard account-profile editing block: avatar with change/remove, name, a prefixed username, email, and a bio with a live count, closed by a Cancel and Save footer. It owns its field state and confirms inline once saved, so you do not hand-wire those pieces.