Render a Checkbox with enclosed Label in BS3 (reopen)

[Bhoft]

Hi,

today i updated yii2-widget-activeform to version 1.5.7
and sadly the problem is now even more worse.

The attribute Label Text isn't used as the checkbox label and the custom label is not rendered any more (so the required label is missing).

Used the same php code as in the older issue:

 $form = ActiveForm::begin(['type'=>ActiveForm::TYPE_VERTICAL]);
 echo $form->field($review_model, 'signed_check')->checkbox(['name' => "SubmissionReview[signed_check]",'labelOptions'=>['style'=>'font-weight:bold; color:red; line-height:1.5em;']])->label('Signature Check');

Do you have an advice?

Also simple tests like below doesn't render correctly:

echo $form->field($review_model, 'signed_check')->checkbox(['label' => 'TestOption'], true)->label('TestLabel');
echo $form->field($review_model, 'signed_check')->checkbox([], true)->label('TestLabel');

I have now troubles to downgrade because several other packages (kartik-v/yii2-detail-view) are depending ob kartik-v/yii2-builder which needs to be downgraded to get older versions of the kartik-v/yii2-widget-activeform.

I wasn't sure if a comment on a closed issue is to be seen therefore I have created a new one.
#111

[Bhoft]

I guess this isn't even an issue of your classes but more an issue of yiisoft/yii2-bootstrap extension.
yiisoft/yii2-bootstrap#114 (comment)

still i couldn't figure out a way how i can render a single checkbox with the control wrappers and a label
:(

[kartik-v]

@Bhoft you can try using kartik\form\ActiveForm instead of yii\bootstrap\ActiveForm to render.

[Bhoft]

@kartik-v as i have written in my first post i have used your kartik\form\ActiveForm,
With 1.5.7 the issue is ´again´ there which was fixed in 1.5.3.
9b95a96

But as you are also using parrent::label etc. it could be if the yiisoft/yii2-bootstrap ActiveFrom and ActiveField classes fixes this issue it would also solve the problem with your classes.

I have mixed something you are extending from yii\widgets\ActiveField and not from yiisoft\yii2-bootstrap\ActiveField therefore your issue isn't related to the one from yii2-bootstrap and is independent.

[kartik-v]

@Bhoft it works and behaves as expected with kartik\form\ActiveForm for both Bootstrap 3.x & 4.x and for both checkbox with enclosed label and without enclosed label.

Since your query is on Bootstrap 3.x here is how it looks for both cases

Check the Bootstrap 3.x Active Form Demo where it was tested. That demo is without enclosed label.

Replacing it with enclosed label also works like below:

<?= $form->field($model, 'rememberMe')->checkbox(['id' => 'remember-me-ver'], true)->label('My Custom Label (Kartik)') ?>

[Bhoft]

if this is now as its intended to be displayed.
How can i render a single checkbox like all other input fields?
So a Label above the field with the required asterisk and which also gets "red" when an error occured.
E.g. if the checkbox wasn't checked.

I have no problem in changing the "label" of the checkbox.
But i wanted to display a contorl-label next to the single checkbox.
This is possible for all other field types. But not possible for single radio/checkboxes.

It is not possible in your kartik\form\ActiveForm and also not possible in yii\bootstrap\ActiveForm.
But is is possible in yii\widgets\ActiveForm without a problem.

My current solution to the problem is to render a checkboxList with only one checkbox

$items = ['I declare that, to the best of my knowledge, I have no direct or indirect conflict of interest in the valuation of this proposal.'];
echo $form->field($review_model, 'signed_check')->checkboxList($items, ['name' => "SubmissionReview[signed_check]",'itemOptions'=> ['labelOptions'=>['style'=>'font-weight:bold; color:red; line-height:1.5em;']]]);

So the result will look like this:

and on an error the control label should be have the error state color as all the other fields.

Neither any of the tests with a single checkbox would render this layout:

$label = 'I declare that, to the best of my knowledge, I have no direct or indirect conflict of interest in the valuation of this proposal.';
echo $form->field($review_model, 'signed_check')->checkbox(['name' => "SubmissionReview[signed_check]", 'label' => $label, 'labelOptions'=>['style'=>'font-weight:bold; color:red; line-height:1.5em;']]);
echo $form->field($review_model, 'signed_check')->checkbox(['name' => "SubmissionReview[signed_check]", 'label' => $label, 'labelOptions'=>['style'=>'font-weight:bold; color:red; line-height:1.5em;']])->label('test');
echo $form->field($review_model, 'signed_check')->checkbox(['name' => "SubmissionReview[signed_check]", 'label' => $label, 'labelOptions'=>['style'=>'font-weight:bold; color:red; line-height:1.5em;']], false)->label('test');
echo $form->field($review_model, 'signed_check')->checkbox(['name' => "SubmissionReview[signed_check]", 'label' => $label, 'labelOptions'=>['style'=>'font-weight:bold; color:red; line-height:1.5em;']], true)->label('test');

the result would look like:

And i also thing for the first the labelOptions should be used as well as its written in the documentation
labelOptions: array, the HTML attributes for the label tag. This is only used when the "label" option is specified.

For the Completion this is what the fields rendered look like with yii\widgets\ActiveForm

And yii\bootstrap\ActiveForm

[kartik-v]

You need to just set/modify the checkEnclosedTemplate within active field configurtion for your use case. This defaults to:

ActiveField::checkEnclosedTemplate = "{beginLabel}\n{input}\n{labelTitle}\n{endLabel}\n{error}\n{hint}"

You need to include your additional HTML/TEXT content within:

$preLabel = "Signature<br>";
$fieldConfig = [
    'checkEnclosedTemplate' => "{beginLabel}\n{$preLabel}\n{input}\n{labelTitle}\n{endLabel}\n{error}\n{hint}"
];
echo $form->field($model, 'rememberMe', $fieldConfig)
    ->checkbox(['id' => 'remember-me-ver'], true)
    ->label('My Custom Label (Kartik)');

[Bhoft]

Thats not correct, the html code is different.

Your preLabel is within the <div class="checkbox"> content and not directly after the form-group div.

If i add a activeLabel (for the error display and required asterisk) as the PreLabel code e.g. something like this:

$preLabel =  Html::activeLabel($review_model, 'signed_check', ['class' => 'control-label' , 'label'=> 'Signature Check']);

The rendering would be completly off

the problem is that i couldn't render stuff outside of the <div class="checkbox">

[kartik-v]

I had shared just an example to customise the rendering that you need to adapt for your use case For example for an enclosed label I am not sure why you would want to nest another label tag inside... Just insert a markup e.g. a span or div with your own CSS class and style it based on the pre and post error state. Bootstrap should style all content inside a label with error states. You should also try with one of the enclosed OR non enclosed label to achieve this better (use checkTemplate for non enclosed label customization). IMO... Bootstrap 4.x has a better simpler styling method for the label and checkboxes than BS3.x.

[kartik-v]

As an example I achieved your use case for BS3.x with the following code:

Set this in your view CSS file

.kv-pre-label {
    display: block;
    margin: 0 0 5px -20px;
    font-weight: bold;
}
.kv-pre-label .required {
    color: red;
}

Render the field

$preText = $model->getAttributeLabel('signature') . ' <span class="required">*</span>';
$preLabel = Html::tag('span', $preText, ['class' => 'kv-pre-label']);
$template = "{beginLabel}\n{$preLabel}\n{input}\n{labelTitle}\n{endLabel}\n{error}\n{hint}";
$label = 'I declare that, to the best of my knowledge, I have no ' .
     'direct or indirect conflict of interest in the valuation of this proposal.';
// $form is instance of kartik\form\ActiveForm
echo $form->field($model, 'signature', ['checkEnclosedTemplate' => $template])
    ->checkbox(['id' => 'kartik-custom'], true)
    ->label($label);

Gives the following output:

[kartik-v]

So you can wrap it in a separate function or widget to render it:

class KvHelper {

public function renderCheckbox($model, $form, $attribute, $label, $options = []) {
    $preText = $model->getAttributeLabel($attribute) . ' <span class="required">*</span>';
    $preLabel = Html::tag('span', $preText, ['class' => 'kv-pre-label']);
    $template = "{beginLabel}\n{$preLabel}\n{input}\n{labelTitle}\n{endLabel}\n{error}\n{hint}";
    return $form->field($model, $attribute, ['checkEnclosedTemplate' => $template])
        ->checkbox($options, true)
        ->label($label);
}

}

and use it in your form view:

$label = 'I declare that, to the best of my knowledge, I have no ' .
     'direct or indirect conflict of interest in the valuation of this proposal.';
echo KvHelper::renderCheckbox($model, $form, 'signature', $label);

[Bhoft]

I really appreciate your help and effort 👍
But i have to say that I still don't understand why this isn't a "bug".

• it was working as expected in some of your older versions
• even yiisoft has marked it now as a bug in their Boostrap ActiveForm Class the field checkBox is not reasonable yiisoft/yii2-bootstrap#114 (comment) as the behaviour is different in the normal ActiveForm class.

As far as I understand setting the "label" option is the item-label of the checkbox.
Calling label() should render the control-label.
yiisoft/yii2#7794 (comment)

At least this is the functionality in the normal ActiveForm.

As I have written above I have already found a workaround that I render a checkboxList with only one checkbox if I wanted to have a control-label for a single checkbox.
But thanks for your example code, but still i find it a little "to much" if i have to add additonal css code when i just wanted to print out the control-label for a single checkbox.
So it would be nice to have this feature in-built.

I guess there must be a better difference between the item-label and the control-label for the single checkbox / radio.

You can clearly see the difference for other fields e.g. textInput
echo $form->field($model, 'required_field')->textInput(['label' => 'some item label'])->label('some control label');

The item-label (set via the direct options) isn't used to render a label at all (it is only rendered as a tag attribute via HtmlOptions).

The label() call would render the <label for=""></label> with the given text here "some control label" instead of "required field". So the control-label is overwritten by label().

The same happens for yii\widgets\ActiveForm.
But buggy for yii\bootstrap\ActiveForm and your kartik\widgets\ActiveForm.

This code would render differently for each class:

$model = new yii\base\DynamicModel();
$model->defineAttribute('required_field', $value = null);
$model->addRule(['required_field'], 'required');

$listOptions = ['Option 1', 'Option 2', 'Option 3'];
$labelOptions = ['style'=>'font-weight:bold; color:red; line-height:1.5em;'];


$classes = ['kartik\widgets\ActiveForm', 'yii\widgets\ActiveForm', 'yii\bootstrap\ActiveForm'];

$itemLabel = 'some item label';
$controlLabel = 'changed control label';

// checkboxes
echo Html::beginTag('div', ['class' => 'row']);
echo Html::beginTag('div', ['class' => 'col-md-12']);
echo Html::tag('h2', 'checkboxes', ['style'=> 'text-align:center;']);
echo Html::endTag('div', ['class' => 'col-md-12']);
echo Html::endTag('div', ['class' => 'row']);

echo Html::beginTag('div', ['class' => 'row']);
foreach ($classes as $i => $classname) {

    $form = $classname::begin();
    echo Html::beginTag('div', ['class' => 'col-md-4']);
    print '<b>class</b><pre>'.print_r(get_class($form), true). '</pre>';


    echo $form->field($model, 'required_field')->checkbox(['label' => $itemLabel, 'labelOptions'=> $labelOptions, 'id'=>uniqid()]);
    echo $form->field($model, 'required_field')->checkbox(['label' => $itemLabel, 'labelOptions'=> $labelOptions, 'id'=>uniqid()])->label($controlLabel);

    echo '<caption>enclosedByLabel = true :</caption><br>';
    echo $form->field($model, 'required_field')->checkbox(['labelOptions'=> $labelOptions, 'id'=>uniqid()], true);
    echo $form->field($model, 'required_field')->checkbox(['label' => $itemLabel, 'labelOptions'=> $labelOptions, 'id'=>uniqid()], true);
    echo $form->field($model, 'required_field')->checkbox(['label' => $itemLabel, 'labelOptions'=> $labelOptions, 'id'=>uniqid()], true)->label($controlLabel);

    echo '<caption>enclosedByLabel = false :</caption><br>';
    echo $form->field($model, 'required_field')->checkbox(['labelOptions'=> $labelOptions, 'id'=>uniqid()], false);
    echo $form->field($model, 'required_field')->checkbox(['label' => $itemLabel, 'labelOptions'=> $labelOptions, 'id'=>uniqid()], false);
    echo $form->field($model, 'required_field')->checkbox(['label' => $itemLabel, 'labelOptions'=> $labelOptions, 'id'=>uniqid()], false)->label($controlLabel);

    $form::end();
    echo Html::endTag('div', ['class' => 'col-md-4']);
}
echo Html::endTag('div', ['class' => 'row']);


echo Html::beginTag('div', ['class' => 'row']);
echo Html::beginTag('div', ['class' => 'col-md-12']);
echo Html::tag('h2', 'checkboxList', ['style'=> 'text-align:center;']);
echo Html::endTag('div', ['class' => 'col-md-12']);
echo Html::endTag('div', ['class' => 'row']);

echo Html::beginTag('div', ['class' => 'row']);
foreach ($classes as $i => $classname) {
    $form = $classname::begin();
    echo Html::beginTag('div', ['class' => 'col-md-4']);

    echo $form->field($model, 'required_field')->checkboxList($listOptions, ['label' => $itemLabel, 'itemOptions'=>['labelOptions'=> $labelOptions], 'id'=>uniqid()]);
    echo $form->field($model, 'required_field')->checkboxList($listOptions, ['label' => $itemLabel, 'itemOptions'=>['labelOptions'=> $labelOptions], 'id'=>uniqid()])->label($controlLabel);

    $form::end();
    echo Html::endTag('div', ['class' => 'col-md-4']);
}
echo Html::endTag('div', ['class' => 'row']);

There are following differences for the single checkboxes (same for radio) when the result of yii\widgets\ActiveForm is the correct render behaviour.

kartik\widgets\ActiveForm:

• 1st checkbox doesn't use the label options (no red text)
• 2nd checkbox doesn't render the control-label from the label()

with enclosedByLabel = true

• 1st checkbox doesn't use the label options (because this is only used when item label is set) from the documentation this seems the correct behaviour. But then it is an extra set to set the item label with the attributeLabel to get the Labeloptions used and a dynamic label from the model attributes.
• 2nd checkbox even when the item label is set the labelOptions aren't used.
• 3rd checkbox the control label isn't rendered but the text is used as the item label.

with enclosedByLabel = false
your checkboxes render the label always after the checkbox (could be different template)

• 1st checkbox no control-label is rendered.

Of course some of these tests could be not used in the real world and where just added to see differences between the classes. I don't call most of them bugs but some of them might be bugs.
e.g. that sometimes the labelOptions aren't used even when the label is set.

[kartik-v]

@Bhoft the changes have been incorporated in this extension to equally provide support for both BS3 and BS4 and note that this change is only for checkboxes/radios.

Bootstrap 4.x checkbox / radio markup for forms does not recommend enclosed labels for checkboxes and only uses non-enclosed labels. It is something which you need to consider when updating your Bootstrap related apps in future with 4.x. Though this widget will support an ability to include enclosed checkbox label in BS4 as well but it kind of deviates from the BS4 recommended style.

Since in your use case you actually want 2 different labels to be displayed (one before checkbox and one after checkbox) - it is something which is not a default functionality but can be achieved with some additional config as mentioned.

[Bhoft]

Im Ok with this,
I just wonder why yiisoft marked the same issue as "bug" on their bootstrap ActiveForm because the rendering behaviour is different in the normal ActiveForm. yiisoft/yii2-bootstrap#114 (comment)

I guess i never stumbled above this issue when the singe checkbox code hasn't rendered my wished html code in some earlier versions of your class and wasn't also fixed by you to work :-)

Still your checkbox function has then this issue that the LabelOptions aren't used if 'label' is set. But is guess this is a simple thing to fix.

echo $form->field($model, 'required_field')->checkbox(['label' => $itemLabel, 'labelOptions'=> $labelOptions, 'id'=>uniqid()]);

From your documentation / Source:

• label: string, a label displayed next to the checkbox. It will NOT be HTML-encoded. Therefore you can pass in HTML code such as an image tag. If this is is coming from end users, you should [[Html::encode()]] it to prevent XSS attacks. When this option is specified, the checkbox will be enclosed by a label tag.
• labelOptions: array, the HTML attributes for the label tag. This is only used when the "label" option is specified.

[kartik-v]

BTW... a flipped alternative you were mentioning above. You can use the for attribute to be rendered for the default label and additional long label to be rendered by changing the template a bit this way:

   $postLabel = 'Long additional label text';
   $template = "{beginLabel}\n{labelTitle}\n{input}\n{$postLabel}\n{endLabel}\n{error}\n{hint}";
   return $form->field($model, $attribute, ['checkEnclosedTemplate' => $template])
        ->checkbox($options, true;

Again use a bit of styling with CSS to change the paddings by enveloping the template in a custom container if desired.

[Bhoft]

I haven't looked into BS4 yet (will when i have some time) so i couldn't say anything about this.

Btw2 ;)
there is a single checkbox with a control-label in the horizontal-form demo.
https://getbootstrap.com/docs/4.1/components/forms/#horizontal-form

[kartik-v]

I am not clear what is the issue you have with single checkbox.

Check the active form demo pages for BS4 where for vertical, horizontal, and inline - the single checkboxes are rendered.

The same demo for Bootstrap 3 is here.

[kartik-v]

From your documentation / Source:
label: string, a label displayed next to the checkbox. It will NOT be HTML-encoded. Therefore you can pass in HTML code such as an image tag. If this is is coming from end users, you should [[Html::encode()]] it to prevent XSS attacks. When this option is specified, the checkbox will be enclosed by a label tag.
labelOptions: array, the HTML attributes for the label tag. This is only used when the "label" option is specified.

This will need to be corrected in docs

[Bhoft]

I am not clear what is the issue you have with single checkbox.
Check the active form demo pages for BS4 where for vertical, horizontal, and inline - the single checkboxes are rendered.
The same demo for Bootstrap 3 is here.

In the bootstrap4 demo link https://getbootstrap.com/docs/4.1/components/forms/#horizontal-form there is a checkbox with a control "label".

I haven't seen this in your demos. There is always a single checkbox with a single "item" label for the checkbox to click but no "control label" e.g. which could display the name of the field (which is shown on the error summary) and the required asterisk (via css see below).

.form-group.required .control-label::after { content: " *"; color: red; }

Ok they haven't rendered a "label" tag for the control-label but only used a div without any classname but i guess this customizeable.
( I have added html comments to the html code from the demo page)

   <div class="form-group row">
      <div class="col-sm-2">Checkbox</div>  <!-- control label -->
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="gridCheck1">
          <label class="form-check-label" for="gridCheck1"> <!-- label of the checkbox -->
            Example checkbox
          </label>
        </div>
      </div>
    </div>

Hmm funny i couldn't find any bs4 demo where the control-labels have a required asterisk. There is only a :invalid or :valid for the form elements.. not the labels.
I would find this circumstance a little bit odd when the users always have to submit the whole form to find out which fields are optional and which are required (sadly i have some huge forms).
https://getbootstrap.com/docs/4.1/components/forms/#validation

But besides this the html code is "exactly" what i wanted to be rendered.
A control label output outside of the checkbox div.
And this should be in my opinion done via label().

<div class="form-group highlight-addon field-5bceeb7a6f543 required">
  <label class="control-label"> control label </label>
  <div class="checkbox">
    <label style="font-weight:bold; color:red; line-height:1.5em;" for="5bceeb7a6f543">
      <input name="DynamicModel[required_field]" value="0" type="hidden">
      <input id="5bceeb7a6f543" name="DynamicModel[required_field]" value="1" type="checkbox">
     item label
    </label>
    <div class="help-block"></div>
  </div>
</div>

echo $form->field($model, 'required_field')->checkbox(['label' => $itemLabel, 'labelOptions'=> $labelOptions, 'id'=>uniqid()])->label($controlLabel);

[kartik-v]

In the bootstrap4 demo link https://getbootstrap.com/docs/4.1/components/forms/#horizontal-form there is a checkbox with a control "label".

That is not a control label - it is just a text displayed via html markup via bootstrap grids (which is what I had mentioned earlier as additional markup preLabel and postLabel).

If you cross check the bootstrap demo - it is a simple HTML markup:

<div class="form-group row">
    <div class="col-sm-2">Checkbox</div> <!-- this is what you are calling as control label but it does not control the input, it is just a text -->
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>

[kartik-v]

The required asterisk (via css see below).

This is a good suggestion - will check that as a separate enhancement,

.form-group.required .control-label::after {
    content: " *";
    color: red;
}

[Bhoft]

That is not a control label - it is just a text displayed via bootstrap grid (which is what I had mentioned earlier as additional markup preLabel and postLabel).

yes i already mentioned it myself. But there isn't a huge difference between some text inside some "divs" and the same text in some "label" tag.

I only called it control-label because the classes for these "attribute wise" labels have the classname "control-label" in BS3. The text is only the value of the model::getAttributeName() function.

The problem with your class you couldn't render text outside (before) of the <div class="checkbox"> your preLabel code from above also rendered the text only inside the checkbox div and not a level above.
Thats the point I was writing about all the time.

Btw. of course the "item label" is used in the single checkbox to have a clickable text for only this checkbox (and this is correct).

For a checkbox-list there is a item label for each checkbox but also a control-label for the whole form-group / or field group (depends on how you name it) with e.g. the attributeName and if you use the css the required asterisk.

And of course for a single checkbox it doesn't makes sense to also have the control-label pointing to the checkbox. But the for= part could be left out. So the checkbox value wouldn't change on click and only shows the attributeName and the required state.

Btw2 it is also allowed to have multiple labels pointing to one input, so also that shouldn't be an issue.
https://www.w3.org/TR/html4/interact/forms.html#edef-LABEL

The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.

The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than one LABEL may be associated with the same control by creating multiple references via the for attribute.

[kartik-v]

The problem with you class you couldn't render text outside (before) of the <div class="checkbox"> your preLabel code from above also rendered the text only inside the checkbox div and not a level above.

This is applicable only for BS3 - will check if I can provide an enhancement for this.

[kartik-v]

This is resolved now via enhancement #117. Two new properties contentBeforeField and contentAfterField are available within ActiveField. So to generate your custom label before you can do this:

<?= $form->field($model, 'rememberMe', [
    'contentBeforeField' => '<label for="signature" class="control-label">Signature</label>'
])->checkbox(['id' => 'signature']) ?>

[kartik-v]

Also enhancement #118 addresses this comment earlier. New property showRequiredIndicator available within ActiveField.

[Bhoft]

I think this could been solved it a different / easier way.

Wouldn't it be possible to have the single checkbox and radio rendered internally and only use the output of this to be added to the normal BS template for {input}?

So the $this->parts['{input}'] will be filled either by the complete <div class="checkbox">..</div> and depending on the $enclosedByLabel the <input type="checkbox"> is already enclosed with the $options['label'] or not enclosed label.

So depending on $enclosedByLabel the "subtemplate" would be either
{beginLabel}{intput}{endLabel} or {inuput} {label}.
or
<div class="checkbox">{beginLabel}{intput}{endLabel}</div> or <div>{inuput} {label}</div>.

And then you have e.g. an $options['showControlLabel'] where you either set the $this->template to either have the control Label added or not.

 if ($options['showControlLabel']) {
        $this->template = "{label}{beginWrapper}\n{input}\n{hint}\n{error}\n{endWrapper}";
 } else {
        $this->template = "{beginWrapper}\n{input}\n{hint}\n{error}\n{endWrapper}";
 }

Then the label would be either showing the model attribue Name or if label('some other label') is used it would render this instead.

Maybe you also know a better solution as having an addtional showControlLabel option to control the Label output.

[kartik-v]

Not sure that helps as it would be heavily customised markup.

Note that the checkbox labels for Bootstrap styling are always by default rendered to the right of the input (this is true for both BS4 and BS3).

Any content that you wish to render before the checkbox has to be a separate custom markup as per Bootstrap styling defaults.

Hence in this extension, to make it simple for any input type (whether checkbox, radio, button group, normal text input, select, textarea, or any widget) a generic way to render custom markup before a specific section can be controlled via any of:

• contentBeforeField
• contentBeforeInput
• contentBeforeLabel
• contentBeforeHint
• contentBeforeError

and conversely markup after a section can be rendered via any of:

• contentAfterField
• contentAfterInput
• contentAfterLabel
• contentAfterHint
• contentAfterError