MDL-69453 core_form: improve form UI icons and alignment
[moodle.git] / lib / form / templates / element-radio.mustache
1 {{!
2     @template theme_boost/core_form/element-radio
4     Example context (json):
5     {
6         "element": {
7             "id": "id_test_radio0",
8             "name": "test_radio_button"
9         }
10     }
12 }}
13 <div class="form-group row {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}">
14     <div class="col-md-3">
15         {{#text}}
16             <label for="{{element.id}}">
17                 {{{label}}}
18             </label>
19         {{/text}}
20     </div>
21     <div class="col-md-9 checkbox">
22         <div class="form-check d-flex">
23                 <label class="form-check-label">
24                     {{^element.hardfrozen}}{{#element.frozen}}{{#element.checked}}
25                         <input type="hidden" name="{{element.name}}" value="{{element.value}}">
26                     {{/element.checked}}{{/element.frozen}}{{/element.hardfrozen}}
27                     <input type="radio" class="form-check-input" {{^element.frozen}}name="{{element.name}}"{{/element.frozen}}
28                         id="{{element.id}}" value="{{element.value}}"
29                         {{#element.checked}}checked{{/element.checked}}
30                         {{#element.frozen}}disabled{{/element.frozen}}
31                         {{#error}}
32                             autofocus aria-describedby="{{element.iderror}}"
33                         {{/error}} {{{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}}