How to change input label for Ory Elements?

[meotimdihia]

Currently, the email input is shown as ID. And users often ask me what is their ID.
How to change it:

Identity Schema

[meotimdihia]

Does anyone have the answer? It is strange to show email's label as ID.

[vinckr]

Hello @meotimdihia

At the moment you have to build a custom UI to change these labels and other styling of the UI. You can look at this documentation for some pointers: https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-overview

Making this possible in the hosted UI is on the roadmap, so this should be possible to do without custom UI soon.

[meotimdihia]

Thanks for the reply. I am using @ory/elements. I switched from custom UI to it.

[Benehiko]

You can rewrite the flow data before passing it along to Ory Elements. Just swap out the property meta.label.text value for something else and it will change in the UI.

...
"ui": {
  "nodes": [
    {
      "type": "input",
      "group": "default",
      "attributes": {
        "name": "identifier",
        "type": "text",
        "value": "",
        "required": true,
        "disabled": false,
        "node_type": "input"
      },
      "messages": [],
      "meta": {
        "label": {
            "id": 1070004,
            "text": "ID",
            "type": "info"
        }
      }
    }
  ],
}

[meotimdihia]

@Benehiko thanks, it works for me.

[Benehiko]

Just to also keep everyone up to date with the current status of this. We have recently introduced translations into Ory Elements and Ory Kratos and we will be providing a way of adding custom translations or custom text to a supported language through the Ory Elements IntlProvider. See this WIP #158