Skip to content

Commit 6f2810c

Browse files
author
Damien Carrier
committed
[TogglePasswordComponent] Add documentation for usage without Symfony Forms
1 parent 19feb79 commit 6f2810c

File tree

1 file changed

+31
-2
lines changed

1 file changed

+31
-2
lines changed

src/TogglePassword/doc/index.rst

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ needed if you're using AssetMapper):
3434
$ yarn install --force
3535
$ yarn watch
3636
37-
Usage
38-
-----
37+
Usage with Symfony Forms
38+
------------------------
3939

4040
Any ``PasswordType`` can be transformed into a toggle password field by adding the ``toggle`` option::
4141

@@ -259,6 +259,35 @@ Then in your form, add your controller as an HTML attribute::
259259
// ...
260260
}
261261

262+
Usage without Symfony Forms
263+
---------------------------
264+
265+
You can also use the TogglePassword with native HTML inputs.
266+
It requires a little bit more work but it's still possible.
267+
Here is an example::
268+
269+
// ...
270+
271+
<label for="password">Password</label>
272+
<input
273+
id="password"
274+
name="password"
275+
type="password"
276+
autocomplete="current-password"
277+
required
278+
placeholder="Password"
279+
{{ stimulus_controller('@symfony/ux-toggle-password--toggle-password', {
280+
visibleIcon: 'Default', // Here you can pass an SVG tag or a string. Default is the value for the default svg
281+
visibleLabel: 'Show', // This field is optional
282+
hiddenIcon: 'Default', // Here you can pass an SVG tag or a string. Default is the value for the default svg
283+
hiddenLabel: 'Hide', // This field is optional
284+
buttonClasses: ['toggle-password-button'], // Here you can add as many classes as you wish. You will need at least to add the "toggle-password-button" class
285+
}
286+
) }}
287+
>
288+
289+
// ...
290+
262291
Backward Compatibility promise
263292
------------------------------
264293

0 commit comments

Comments
 (0)