keycloak-scim/docs/documentation/server_development/topics/custom-attributes.adoc

[[_custom_user_attributes]]
== Custom user attributes

You can add custom user attributes to the registration page and account management console with a custom theme.

=== Registration page

Use this procedure to enter custom attributes in the registration page.

.Procedure

. Copy the template `themes/base/login/register.ftl` to the login type of your custom theme.

. Open the copy in an editor.
+
For example, to add a mobile number to the registration page, add the following snippet to the form:
+
[source,html]
----
<div class="form-group">
   <div class="${properties.kcLabelWrapperClass!}">
       <label for="user.attributes.mobile" class="${properties.kcLabelClass!}">Mobile number</label>
   </div>

   <div class="${properties.kcInputWrapperClass!}">
       <input type="text" class="${properties.kcInputClass!}" id="user.attributes.mobile" name="user.attributes.mobile" value="${(register.formData['user.attributes.mobile']!'')}"/>
   </div>
</div>
----

. Ensure the name of the input html element starts with `user.attributes`. In the example above, the attribute will be stored by {project_name} with the name `mobile`.

. To see the changes, make sure your realm is using your custom theme for the login theme and open the registration page.

=== Account Management Console

Use this procedure to manage custom attributes in the user profile page in the account management console.

.Procedure
. Copy the template `themes/base/account/account.ftl` to the
account type of your custom theme.

. Open the copy in an editor.
+
As an example to add a mobile number to the account page add the following snippet to the form:
+
[source,html]
----
<div class="form-group">
   <div class="col-sm-2 col-md-2">
       <label for="user.attributes.mobile" class="control-label">Mobile number</label>
   </div>

   <div class="col-sm-10 col-md-10">
       <input type="text" class="form-control" id="user.attributes.mobile" name="user.attributes.mobile" value="${(account.attributes.mobile!'')}"/>
   </div>
</div>
----

. Ensure the name of the input html element starts with `user.attributes`.

. To see the changes, make sure your realm is using your custom theme for the account theme and open the user profile page in the account management console.

[role="_additional-resources"]
=== Additional resources

* See <<_themes,Themes>> for how to create a custom theme.