Checkbox label with URL link in Semantic UI React

Question

Semantic UI React Checkbox can be used like this:

import React from 'react'
import { Checkbox } from 'semantic-ui-react'

const TermsOfServiceCheckbox = () => (
  <Checkbox label='I accept the Terms of Service' />
)

export default TermsOfServiceCheckbox

How do I set the Checkbox label so that the text Terms of Service is a link to a URL?

Oleksandr Fediashov · Accepted Answer · 2017-09-01T19:01:17.160

11

label prop implements the item shorthand, so you can also pass there:

<Checkbox label={<label><a href='/'>I accept the Terms of Service</a></label>} />
<Checkbox label={<label>I accept the <a href='/'>Terms of Service</a></label>} />
<Checkbox label={{ children: <a href='/'>I accept the Terms of Service</a> }} />

edited Sep 01 '17 at 19:01

answered Sep 01 '17 at 10:15

Oleksandr Fediashov

4,315
1
24
42

It only works with `` element, like this: `I accept the – user2962393 Sep 01 '17 at 13:53
Yes, I forgot that `Checkbox` requires `label` in markup. I checked code and updated answer. Thanks – Oleksandr Fediashov Sep 01 '17 at 19:02

Checkbox label with URL link in Semantic UI React

1 Answers1