Koala UI

Settings Form

Pro

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# Activate your Pro license (once per machine)npx koalaui-cli@latest login <key># Add this component (its dependencies come along)npx koalaui-cli@latest add settings-form

Usage#

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

API reference#

SettingsForm

A <form> card composing Avatar, Field, Input and Textarea; it owns the field state and the saved confirmation. Forwards all native <form> props except onSubmit, and accepts className, merged last.

PropTypeDefaultDescription
defaultValuesPartial<SettingsFormData>-Initial firstName, lastName, username, email and bio; missing keys start empty.
onSave(data: SettingsFormData) => void | Promise<void>-Called with the full form data on submit. Return a promise to keep Save loading until it settles.
onCancel() => void-Called when Cancel is pressed.
onPhotoChange(file: File) => void-Called with the file picked through Change photo; the avatar previews it at once. Upload it and pass the stored URL back as avatarSrc. Without it, Change photo is hidden.
onPhotoRemove() => void-Called when Remove is pressed; the avatar falls back to initials. Without it, or with no photo showing, Remove is hidden.
photoAcceptstring"image/jpeg,image/gif,image/png"File types the photo picker accepts (the native accept attribute).
avatarSrcstring-Current avatar image; without it the avatar shows the name's initials.
usernamePrefixstring"koalaui.com/"Static prefix shown before the username input.
titleReact.ReactNode"Profile"Header title. Set it and description to null to drop the header.
descriptionReact.ReactNode"This information will be displayed publicly on your profile."Header text under the title.
density"compact" | "comfortable""compact"Spacing axis: compact pads 16px with sm controls, comfortable pads 24px with md controls. Falls back to the nearest DensityProvider.

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.