<Link> inside a form schema

[chestonchow]

Hi there,

I tried to insert a link to a form schema using the code below but it comes out with this which is not what I expected. I went thru your documentation but nothing is related to this.

import FormRenderer, { componentTypes, validatorTypes } from 'aws-northstar/components/FormRenderer';
import Link from "aws-northstar/components/Link";
...
let schema = {
    fields: [
        ...
        {
            component: componentTypes.SELECT,
            name: 'icon',
            label: `Icon (Please refer ${<Link href="https://feathericons.com/">here</Link>} for the looks of the icons)`,
            options: [
                ...
            ],
            isRequired: true,
            validate: [
                {
                    type: validatorTypes.REQUIRED,
                },
            ],
        },
        ...
    ]
};
...

Is there any existing way to achieve this?
Thanks!!

[mteichtahl]

Hi Cheston At this stage the label only renders a string and this is why you are seeing the object text being rendered. You could look at using the helperText or the description on the field. Whilst I have tried to render a Link into those attributes myself I have a suspicion it may work and achieve what you need Let me know how it goes. If you still need this feature let us know and we will add it to the backlog M Sent on the go - please excuse mistakes On Feb 26, 2021, at 10:23 AM, Cheston Chow <notifications@github.com> wrote:  Hi there, I tried to insert a link to a form schema using the code below but it comes out with this which is not what I expected. I went thru your documentation but nothing is related to this. import FormRenderer, { componentTypes, validatorTypes } from 'aws-northstar/components/FormRenderer'; import Link from "aws-northstar/components/Link"; ... let schema = { fields: [ ... { component: componentTypes.SELECT, name: 'icon', label: `Icon (Please refer ${<Link href="https://feathericons.com/">here</Link>} for the looks of the icons)`, options: [ ... ], isRequired: true, validate: [ { type: validatorTypes.REQUIRED, }, ], }, ... ] }; ... Is there any existing way to achieve this? Thanks!! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[chestonchow]

Hi Marc,

Is helperText part of north star or the one in this? Anyway I have got around with putting the Link after FormRenderer for now. Would be a good to have if you get a chance to implement this.

Many thanks,
Cheston

[jessieweiyi]

Hi @chestonchow,

Have you tried to put a react node into the FormRenderer schema, like:

<>Icon (Please refer <Link href="https://feathericons.com/">here</Link> for the looks of the icons) </>

But from design principle perspective, we do not recommend to use link inside the label. You may use in the description or helpText fields.

[chestonchow]

Hi guys,

I finally figured out helperText to be another property in the FormRenderer schema but the same happens with it.
And yes Jessie putting it inside a node does work!

...
helperText: <>Refer to <Link target="blank" href="https://feathericons.com/">https://feathericons.com/</Link> for the looks of icons.</>,
...

Also why is it bad to put a link in a label?

Thanks,
Cheston

[jessieweiyi]

Hi @chestonchow ,

the label text will be translated into a html label tag.

Firstly, it is an accessible element that screen readers read out loud the label, when the user is focused on the element.

Secondly, when users click on the label, it focus on the form control.

If links are present inside the label, it may confuse the users using screen readers or when users try to click the small label area to focus on the form control.

[jessieweiyi]

Close this issue for now because the question has been resolved.

@chestonchow Please feel free to drop messages if you have any further questions.

[chestonchow]

Gotcha!