Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v4] Rendering of checkboxes and radios changed #395

Closed
GBH opened this issue Jan 19, 2018 · 4 comments · Fixed by #434
Closed

[v4] Rendering of checkboxes and radios changed #395

GBH opened this issue Jan 19, 2018 · 4 comments · Fixed by #434
Assignees
Milestone

Comments

@GBH
Copy link
Contributor

GBH commented Jan 19, 2018

Right now I see:

<div class="form-check">
  <label class="form-check-label" for="user_misc_1">
    <input class="form-check-input" type="checkbox" value="1" name="user[misc][]" id="user_misc_1" />
    Foo
  </label>
</div>

<div class="radio">
  <label for="user_misc_1">
    <input type="radio" value="1" name="user[misc]" id="user_misc_1" />
    Foo
  </label>
</div>

Where it should be:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>

See: https://getbootstrap.com/docs/4.0/components/forms/#default-stacked

@mattbrictson
Copy link
Contributor

Good find. Definitely a bug we need to fix for 4.0.0.

@lcreid
Copy link
Contributor

lcreid commented Jan 21, 2018

@jeffblake mentioned this in a comment on #361. It's good to track this in its own issue.

@lcreid lcreid self-assigned this Jan 27, 2018
@lcreid lcreid added this to the 4.0.0 milestone Jan 27, 2018
@lcreid
Copy link
Contributor

lcreid commented Jan 27, 2018

Should custom radio buttons be rendered the same as before:

      <div class="custom-control custom-radio">
        <input class="custom-control-input" id="user_misc_1" name="user[misc]" type="radio" value="1" />
        <label class="custom-control-label" for="user_misc_1">This is a radio button</label>
      </div>

Should custom check boxes be rendered the same as before:

      <div class="custom-control custom-checkbox">
        <input name="user[terms]" type="hidden" value="0" />
        <input class="custom-control-input" id="user_terms" name="user[terms]" type="checkbox" value="1" />
        <label class="custom-control-label" for="user_terms">I agree to the terms</label>
      </div>

@lcreid
Copy link
Contributor

lcreid commented Jan 28, 2018

This is what needs to be done for this issue (moved here from PR #407):

  • correcting the classes on the radio button elements (Render Bootstrap 4 Radio Buttons and Check Boxes #407 (comment))
  • inline radios and checkboxes
  • custom controls -- Looks like this was already done. Let me know if you see any discrepancies between our output and the Bootstrap 4 documentation
  • update the README where the examples of generated markup are out-of-date
  • the "no label" case -- this is really just hide_label and skip_label.

Bonus marks for investigating how accessibility is facilitated for radio buttons and check boxes (e.g. perhaps including an intelligent default for aria-label).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants