salla-user-profile

An editable profile form for the logged-in customer, for the account or profile page of a theme. It loads the current user through the profile API (showing skeleton placeholders meanwhile) and renders first name, last name, birthday, gender, email and mobile fields with a save button, which sends the changes through the profile update API. All fields are disabled when the store has the sso-login feature, since the profile is then managed elsewhere. Labels are localized through the Salla language strings. Fields use native required validation and visible <label> elements.

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-user-profile> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaUserProfile } from '@salla.sa/twilight-components-react/user-profile';

Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

ExampleCopy Anchor Link

import { SallaUserProfile } from '@salla.sa/twilight-components-react/user-profile';

export function Example() {
  return (
    <SallaUserProfile minAge={13} />
  );
}

PropertiesCopy Anchor Link

RelatedCopy Anchor Link

Renders: <salla-skeleton>, <salla-datetime-picker>, <salla-tel-input>, <salla-button>.