@page "/password"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Blazor Password
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    The Blazor Password TextBox masks input, with autocomplete control and placeholder support.
</RadzenText>

<RadzenText Anchor="password#get-set-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of Password
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the <strong>Password</strong> has a Value property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="Password" Example="PasswordBindValue">
    <PasswordBindValue />
</RadzenExample>

<RadzenText Anchor="password#value-and-change-event" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Get and Set the value of Password using Value and Change event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Value property can be used to set the value of the component and <code>Change</code> event to get the user input.
</RadzenText>
<RadzenExample ComponentName="Password" Example="PasswordChangeEvent">
    <PasswordChangeEvent />
</RadzenExample>

<RadzenText Anchor="password#placeholder" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Define placeholder
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Placeholder</code> property to display hint text when the password field is empty.
</RadzenText>
<RadzenExample ComponentName="Password" Example="PasswordPlaceholder">
    <PasswordPlaceholder />
</RadzenExample>

<RadzenText Anchor="password#without-auto-complete" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Without auto-complete
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Disable browser password auto-completion for enhanced security in specific scenarios.
</RadzenText>
<RadzenExample ComponentName="Password" Example="PasswordWithoutAutoComplete">
	<PasswordWithoutAutoComplete />
</RadzenExample>

<RadzenText Anchor="password#withImmediate" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
	With Immediate
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
	push new value on each keystroke
</RadzenText>
<RadzenExample ComponentName="Password" Example="PasswordImmediate">
	<PasswordImmediate />
</RadzenExample>

<RadzenText Anchor="password#sizes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Password Sizes
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>InputSize</code> property to set the Password size. Available sizes are ExtraSmall, Small, Medium (default), and Large.
</RadzenText>
<RadzenExample ComponentName="Password" Example="PasswordSizes">
    <PasswordSizes />
</RadzenExample>
