How to add text label for checkbox

[vitaliyzolotoy]

Hello!

How I can add checkbox__text label to checkbox?

Checkbox({ mods: { size: 'xl' } }, 'Yes, I agree to the')

[deepsweet]

Hi!

Checkbox itself is a standalone component, so you have to wrap in HTML <label/> the way you like. For example you can use our FieldGroup component:

import FieldGroup from '#field-group';
import Checkbox from '#checkbox';

//
FieldGroup(
    {
        label: 'label text'
        // labelPosition: 'left'
    },
    Checkbox({ checked: true })
);
//

[vitaliyzolotoy]

And how to add id and for attributes to above blocks?

[vitaliyzolotoy]

Label in demo is broken. Can you update demo?

[deepsweet]

And how to add id and for attributes to above blocks?

There is no need for id and for attrs if you are using <label><input/></label>. But anyway, you can add any attrs with React props:

Checkbox({ checked: true, id: 'my-id' })

Label in demo is broken. Can you update demo?

Oops.

[mistadikay]

@vitaliyzolotoy there was a misunderstanding — if you want to trigger checkbox by clicking on its label you should wrap it into Label component like in a demo:

import Label from '#label';
import Input from '#input';

// ...
Label({ text: 'click me to trigger checkbox' },
    Input({ type: 'checkbox' })
)
// ...

Label in demo is broken. Can you update demo?

could you please point out on what is broken exactly?

[vitaliyzolotoy]

No one of above examples works for me. I just want to add [+] text with clickable label.

[mistadikay]

@vitaliyzolotoy could you please provide some example of code or a repo — it's really hard to understand what exactly means “nothing works”

[vitaliyzolotoy]

@mistadikay Please, check examples in https://github.com/rebem/core-components/blob/master/demo/components/demo/index.js

[mistadikay]

@vitaliyzolotoy here is the screenshot with a rendered label from demo:

If something is not working for you, please provide expected/actual results and steps to reproduce. Also any information about your OS/environment would be helpful. Thanks

[vitaliyzolotoy]

@mistadikay Thank you