So... the React Bootstrap Checkbox implementation seems to do the following:

If I just use the default <Checkbox>, I get the following markup:

<div class="checkbox"><label title=""><input type="checkbox" value="on"></label></div>

I use the inline option,<Checkbox inline> I get:

<label class="checkbox-inline" title=""><input type="checkbox" value="on">1</label>

These both work fine in forms typically, but for the DataTable selection checkboxes, these classes applied on the outer elements break the design. To match our existing design most closely, I can do something like this:

          <ControlLabel srOnly htmlFor={id}>
            {label}
          </ControlLabel>
          <FormControl type="checkbox" id={id} checked={rowData.selected} bsClass=" "
            onChange={e => {this.onSelectRow(e, rowData);}}
          />

OR just:

<ControlLabel srOnly htmlFor={id}> {label}</ControlLabel>
<input type="checkbox" id={id} checked={rowData.selected}
            onChange={e => {this.onSelectRow(e, rowData);}}/>

And I get the rendered output that most closely mimics the existing html/design:

<label for="select0" class="control-label sr-only">Select row 0</label>
<input type="checkbox" id="select0" value="on">

I guess what's bothering me about this is I prefer to just use <Checkbox>. I think it might be nice to write a wrapper on top of React Bootstrap Checkbox which just renders an input type="checkbox". Maybe <Checkbox type="form"> renders to the ReactBootstrap default, and <Checkbox type="input" renders just an <input>?

Thoughts @jeff-phillips-18 @sharvit @cdcabrera ?

We have the same exact issue w/ <Radio> it appears 😄 ...

Checkbox Support #119

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions