MDL-69453 core_form: improve form UI icons and alignment
[moodle.git] / lib / form / templates / element-advcheckbox.mustache
1 <div class="form-group row {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}">
2     <div class="col-md-3">
3         {{#text}}
4             <label for="{{element.id}}">
5                 {{{label}}}
6             </label>
7         {{/text}}
8     </div>
9     <div class="col-md-9 checkbox">
10         <div class="form-check d-flex">
11             <label>
12             {{^element.hardfrozen}}
13                 {{^element.frozen}}
14                     <input type="hidden" name="{{element.name}}" value="{{element.deselectedvalue}}">
15                 {{/element.frozen}}
16                 {{#element.frozen}}
17                     <input type="hidden" name="{{element.name}}" value="{{element.frozenvalue}}">
18                 {{/element.frozen}}
19             {{/element.hardfrozen}}
20             <input type="checkbox"
21                 name="{{element.name}}"
22                 class="form-check-input {{element.extraclasses}}"
23                 {{#element.selectedvalue}}
24                     value="{{element.selectedvalue}}"
25                 {{/element.selectedvalue}}
26                 id="{{element.id}}" {{#element.checked}}checked{{/element.checked}}
27                 {{#error}}
28                     autofocus aria-describedby="{{element.iderror}}"
29                 {{/error}}
30                 {{#element.frozen}}
31                     disabled
32                 {{/element.frozen}}
33                 {{{element.attributes}}} >
34                 {{#text}}
35                     {{{.}}}
36                 {{/text}}
37                 {{^text}}
38                     {{{label}}}
39                 {{/text}}
40             </label>
41             <span class="ml-2 d-flex align-items-center align-self-start">
42                 {{#required}}
43                     <div class="text-danger" title="{{#str}}required{{/str}}">
44                     {{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}
45                     </div>
46                 {{/required}}
47                 {{{helpbutton}}}
48             </span>
49         </div>
50         <div class="form-control-feedback invalid-feedback" id="{{element.iderror}}" {{#error}} style="display: block;"{{/error}}>
51             {{{error}}}
52         </div>
53     </div>
54 </div>
55 {{^element.frozen}}
56 {{#js}}
57 require(['theme_boost/form-display-errors'], function(module) {
58     module.enhance({{#quote}}{{element.id}}{{/quote}});
59 });
60 {{/js}}
61 {{/element.frozen}}