# salla-user-profile (https://docs.salla.dev/twilight/react/web-components/salla-user-profile)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

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 it [#use-it]

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

```tsx
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.

## Example [#example]

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

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

```html
<salla-user-profile min-age="13"></salla-user-profile>
```

## Properties [#properties]

| Property | Attribute | Description                                                                                                                | Type     | Default |
| -------- | --------- | -------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| `minAge` | `min-age` | The minimum age in years. The birthday picker does not allow dates later than today minus this many years. Defaults to 10. | `number` | `10`    |

## Related [#related]

Renders: [`<salla-skeleton>`](https://docs.salla.dev/twilight/react/web-components/salla-skeleton), [`<salla-datetime-picker>`](https://docs.salla.dev/twilight/react/web-components/salla-datetime-picker), [`<salla-tel-input>`](https://docs.salla.dev/twilight/react/web-components/salla-tel-input), [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button).