Form.Check: inconsistent checkbox label click handling

[gagarski]

Let's start with a simple case: an uncontrolled radio button:

<Form.Check label="Employee"
    type="radio"
    id="employee-radio"
/>

It checks when you either click the button itself or when you click the "Employee" label. This is quite the same as shown on demo page.

Checkboxes and radio buttons work the same way with a vanilla bootstrap: https://getbootstrap.com/docs/4.3/components/forms/

Now let's make this radio button controlled:

<Form.Check label="Employee"
    type="radio"
    id="employee-radio"
    checked={this.props.mode == "employee"}
    onChange={() => this.onChange("employee")}
/>

Now it works a bit different: you should click the button itself, clicks on "Employee" label are ignored.

Now if you want to handle label clicks you should fully customize the Form.Check rendering as shown here.

Considering that clickable checkbox and radio buttons label are quite native in bootstrap you probably would want to do it for every controlled checkbox and radio button you have.

My suggestion is to always call onChange when clicking to label which is defined as a string property (the simple Form.Check case without customization).

An alternative would be to add a way to customize this behavior with Form.Check properties (a boolean flag or a custom onLabelClick handler) but I don't like it very much. I think the best way would be to implement the most common case by default (which I believe clickable labels are) and let the user customize this behavior by passing Form.Check children.

[jquense]

We don't have any special logic to do this the browsers do it automatically when you click on an label that is associated with a checkbox/radio. This means you have and ID on the input and htmlFor prop on the label. When you fully customize the check make sure that the IDs are setup correctly

[ryanneary]

@jquense If you wrap a checkbox with a label, you don't need the for/id association.

[mephinet]

I think the OP is correct, that the elements rendered by https://github.com/react-bootstrap/react-bootstrap/blob/v1.4.0/src/FormCheck.tsx#L211 are not ideal.
Currently, we create:

<FormCheckInput />
{ hasLabel && <FormCheckLabel /> }

... but we don't connect them via htmlFor (even though FormCheckLabel would allow us to do so - so label and check box are not connected. Instead, this code should read:

{ hasLabel ? <FormCheckLabel><FormCheckInput /></FormCheckLabel>  : <FormCheckInput /> }

[kyletsang]

@mephinet, if you pass an id to FormCheck, it will handle the id/htmlFor for you. This is done using a context. See:

react-bootstrap/src/FormCheck.tsx

Lines 175 to 181 in 3f4fde5

	const innerFormContext = useMemo(
	() => ({
	controlId: id || controlId,
	custom,
	}),
	[controlId, custom, id],
	);

Alternatively, it can take the id from a parent FormGroup if you don't specify the id on FormCheck itself.

If you need to customize the rendering, see docs here

[kalashnikovisme]

My solution according to previous answer

        <Form.Check>
          <Form.Check.Input id="archived" type="checkbox" />
          <Form.Check.Label for="archived">{ t('archived') }</Form.Check.Label>
        </Form.Check>

[pbatey]

In my case, I was missing the id field. Adding it made clicking on the label activate the checkbox.

[Netlighter]

@pbatey thanks for solution.

For everyone who came here because they added “custom” to Form.Check and it stopped working - adding id solves the problem.