@@ -82,6 +82,8 @@ You can disable it by passing ``use_toggle_form_theme`` option to ``false``::
8282
8383 *Note *: If you choose to disable provided package form theme, you will have to handle styling by yourself.
8484
85+ .. _ux-password-customizing-labels-and-icons :
86+
8587Customizing Labels and Icons
8688~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8789
@@ -264,29 +266,34 @@ Then in your form, add your controller as an HTML attribute::
264266Usage without Symfony Forms
265267---------------------------
266268
267- You can also use the TogglePassword with native HTML inputs:
269+ You can also use the TogglePassword with native HTML inputs. Inside the ``stimulus_controller() ``
270+ function you can use the same :ref: `options to customize labels and icons <ux-password-customizing-labels-and-icons >`
271+ shown in previous sections:
268272
269273.. code-block :: html+twig
270274
271- // ...
275+ {# ... #}
272276
273- <div class="toggle-password-container"> // Add "toggle-password-container" or a class that applies position: relative to this container.
277+ {# add "toggle-password-container" or a class that applies "position: relative" to this container #}
278+ <div class="toggle-password-container">
274279 <label for="password">Password</label>
275280 <input
276281 id="password"
277282 name="password"
278283 type="password"
279284 {{ stimulus_controller('symfony/ux-toggle-password/toggle-password', {
280- {# visibleLabel: 'Show password', // If you want to modify this label. #}
281- {# visibleIcon: 'Some svg icon', // If you want to modify this icon. #}
282- {# hiddenLabel: 'Hide password', // If you want to modify this label. #}
283- {# hiddenIcon: 'Some svg icon', // If you want to modify this icon. #}
284- buttonClasses: ['toggle-password-button'], // Add as many classes as you wish. "toggle-password-button" is needed to activate the default CSS.
285+ visibleLabel: 'Show password',
286+ visibleIcon: 'Name of some SVG icon',
287+ hiddenLabel: 'Hide password',
288+ hiddenIcon: 'Name of some SVG icon',
289+ # you can add your own CSS classes if needed, but the following
290+ # CSS class is required to activate the default styles
291+ buttonClasses: ['toggle-password-button'],
285292 }) }}
286293 >
287294 </div>
288295
289- // ...
296+ {# ... #}
290297
291298Backward Compatibility promise
292299------------------------------
0 commit comments