Skip to content

Label component missing form-control-label class #451

@matthewheck

Description

@matthewheck

Issue description

  • version #4.6.2
  • components: Label

Label appears to be missing the form-control-label class. I ran into this problem when handling validation issues.

Example of code

<FormGroup color={color}>
	<Label for={name}>{label}</Label>
	<Input .../>
	<FormText color="muted">{helpToDisplay}</FormText>
	<FormFeedback>{error}</FormFeedback>
</FormGroup>

Code output

<div class="has-danger form-group">
	<label for="first_name" class="">What is your name?</label>
	<input class="form-control" ...>
	<small class="form-text text-muted">Please include first name and last name.</small>
	<div class="form-control-feedback">There was a problem!</div>
</div>

Bootstrap Documentation

This is from the latest Bootstrap documentation

<div class="form-group has-danger">
  <label class="form-control-label" for="inputDanger1">Input with danger</label>
  <input type="text" class="form-control form-control-danger" id="inputDanger1">
  <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>

Solutions

Most painless solution is for me to just pass form-control-label as the className prop, but given that this is in the Bootstrap documentation, it seems that a more holistic solution could be preferable (which I'm happy to handle).

I believe the change will be pretty much a one liner, but will have to make sure the class is only added when the Label is not being used with a column prop or when the label is for checkboxes/radios to follow the examples from Bootstrap.

If you're okay with this addition, I'm happy to open up a PR!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions