diff --git a/components/textbox/overview.md b/components/textbox/overview.md index 7c482f804c..eec1033155 100644 --- a/components/textbox/overview.md +++ b/components/textbox/overview.md @@ -61,7 +61,7 @@ The Blazor TextBox provides various parameters to configure the component: | `MaxLength` | `int?` | Maps to the `maxlength` attribute of the HTML `` element. | | `InputMode` | `string` | A `string` that maps to the [`inputmode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) attribute of the HTML element. You can use it to instruct the rendering device to show a suitable virtual keyboard (for example, one optimized for entering an URL or an email). Make sure to use values that make sense for a text input. For example, if you need a numerical input, use the TelerikNumericTextBox component, or the TelerikDatePicker for dates. | | `Name` | `string` | The `name` attribute of the HTML element. It is usually required so the `AutoComplete` will be honored by the browser. | -| `Password` | `bool` | When set to `true`, the HTML element renders `type="password"` so that the user input is hidden. You can find examples of validation and reveal buttons in the [Live Demo: Password Textbox](https://demos.telerik.com/blazor-ui/textbox/password) | +| `Password` | `bool` | When set to `true`, the HTML element renders `type="password"` so that the user input is hidden. You can find examples of validation and reveal buttons in the [Password Textbox demo](https://demos.telerik.com/blazor-ui/textbox/password) and the [Add Eye Icon to Reveal a TextBox Password]({%slug textbox-kb-eye-reveal-password%}) article. | | `Placeholder` | `string` | A `string` that maps to the `placeholder` attribute of the HTML element. If a `Label` is defined, it will be shown instead of the placeholder when the input is not focused. | | `ShowClearButton` | `bool` | Defines if the user can clear the component value through an **x** button rendered inside the input. | | `SpellCheck` | `string` | A `string` that maps to the [`spellcheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck) attribute of the HTML element. Use it to disable browser spellchecking if it's intrusive to the user or due to [privacy and security concerns](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck#security_and_privacy_concerns). | @@ -113,22 +113,7 @@ The TextBox provides a `FocusAsync` method that allows the application to focus >caption Password type TextBox -````RAZOR -@* An example of enabling the Password mode of the text box. Make sure to add a form and validation -for example: https://demos.telerik.com/blazor-ui/textbox/password -*@ - - - -@code { - // in a real case you should have a form, a model, and validation - // the form may also need autocomplete attribute and other corresponding inputs to enable autocompletion - string ThePassword { get; set; } -} -```` +See [Add Eye Icon to Reveal a TextBox Password]({%slug textbox-kb-eye-reveal-password%}). >caption Programmatically change the TextBox value diff --git a/knowledge-base/textbox-eye-reveal-password.md b/knowledge-base/textbox-eye-reveal-password.md new file mode 100644 index 0000000000..7b4497ccf5 --- /dev/null +++ b/knowledge-base/textbox-eye-reveal-password.md @@ -0,0 +1,83 @@ +--- +title: Add Eye Icon to Reveal a TextBox Password +description: Learn how to implement an eye toggle button that reveals the typed password in a Telerik TextBox for Blazor. +type: how-to +page_title: How to Add Eye Icon to Telerik Password TextBox in Blazor +slug: textbox-kb-eye-reveal-password +tags: telerik, blazor, textbox +ticketid: 1673598, 1672864, 1656817, 1655436, 1640843, 1619127, 1584950 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductTextBox for Blazor
+ +## Description + +This KB answers the following questions: + +* How to add an eye icon to a text input and click the icon to show and hide the entered password? +* How to implement a button that reveals the password in a Telerik TextBox on click? +* How to make an eye toggle appear in a password textbox no matter if the textbox is focused or not? +* How to use `mouseup` and `mousedown` events on the `TelerikSvgIcon` control to toggle a password field? + +## Solution + +1. Add a [Button]({%slug components/button/overview%}) or a [ToggleButton]({%slug togglebutton-overview%}) with the desired [icon]({%slug button-icons%}) next to the TextBox or inside the [TextBox `SuffixTemplate`]({%slug common-features/input-adornments%}). +1. Use the [Button's `OnClick` event handler]({%slug button-events%}) to toggle the [TextBox `Password` parameter]({%slug components/textbox/overview%}#textbox-parameters) value. +1. (optional) Instead of Button `OnClick`, use `@onmousedown` and `@onmouseup` Blazor events on a generic HTML element to toggle the TextBox `Password` parameter. This approach allows using events with Telerik components that do not expose them, for example, a [Telerik SVG icon or a font icon]({%slug common-features-icons%}). +1. To use the TextBox with a reveal button inside a [Telerik Form, use a `FormItem` `Template`]({%slug form-formitems-template%}). + +>caption Add an eye icon to reveal a password + +````RAZOR +

Reveal password on Telerik Button OnClick

+ + + + + + + +

Reveal password on HTML element @@onmousedown

+ + + + + + + + + + + +@code { + private string TextBoxValue1 { get; set; } = "abcde1"; + private bool TextBoxPassword1 { get; set; } = true; + + private string TextBoxValue2 { get; set; } = "zyxwv2"; + private bool TextBoxPassword2 { get; set; } = true; +} +```` + +## See Also + +* [Input Adornments]({%slug common-features/input-adornments%}) +* [Form Item Templates]({%slug form-formitems-template%}) \ No newline at end of file