Checkbox with icon and label in Custom UI

Hi there,

I try to implement a form field of type checkbox in my custom UI Forge app, which not only has a label but also an icon displayed next to it. From AtlasKit documentation I have this code for checkboxes

<Fieldset legend="Products">
        <CheckboxField name="product" value="jira">
              {({ fieldProps }) => <Checkbox {...fieldProps} label="Jira" />}
        </CheckboxField>
        <CheckboxField name="product" value="confluence">
             {({ fieldProps }) => (
                   <Checkbox {...fieldProps} label="Confluence" />
              )}
       </CheckboxField>
       <CheckboxField name="product" value="bitbucket">
            {({ fieldProps }) => (
                    <Checkbox {...fieldProps} label="Bitbucket" />
            )}
       </CheckboxField>
      </Fieldset>

I am struggling with getting the icon displayed next to the label, e.g. the Jira icon next to the Jira label. The label property only accepts text, but no variable or other html. I am looking for something like

checkbox - icon - Jira
checkbox - icon - Confluence
etc.

Is there a way to get an image tag (<img src="icon_url"></img>) displayed next to the label text of a checkbox?
Any hint is appreciated as I didn’t find anything myself so far.

1 Like

I found a solution myself. Just set it up as a table. One cell contains the checkbox, one the icon, and another the label. It is a workaround but it works and I get what I want.