Skip to content

Add Clear button feature to BitTextField component (#11847) #11936

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
msynk merged 2 commits into from
Dec 28, 2025
Merged

Add Clear button feature to BitTextField component (#11847) #11936

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4a3aa06
add Clear button feature to BitTextField component #11847
msynk Dec 28, 2025
cb27228
resolve review comments
msynk Dec 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 43 additions & 22 deletions src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
@namespace Bit.BlazorUI
@namespace Bit.BlazorUI
@inherits BitTextInputBase<string?>

<div @ref="RootElement" @attributes="HtmlAttributes"
id="@_Id"
style="@StyleBuilder.Value"
class="@ClassBuilder.Value"
dir="@Dir?.ToString().ToLower()">
<div style="@Styles?.InputWrapper" class="bit-tfl-wrp @Classes?.InputWrapper">
<div style="@Styles?.InputWrapper"
class="bit-tfl-wrp @Classes?.InputWrapper">
@if (LabelTemplate is not null)
{
<label id="@_labelId" for="@_inputId">
Expand All @@ -15,22 +16,24 @@
}
else if (Label.HasValue())
{
<label style="@Styles?.Label"
class="bit-tfl-lbl @Classes?.Label"
id="@_labelId"
for="@_inputId">
<label id="@_labelId"
for="@_inputId"
style="@Styles?.Label"
class="bit-tfl-lbl @Classes?.Label">
@Label
</label>
}

<div style="@Styles?.FieldGroup" class="bit-tfl-fgp @Classes?.FieldGroup">
<div style="@Styles?.FieldGroup"
class="bit-tfl-fgp @Classes?.FieldGroup">
@if (PrefixTemplate is not null)
{
@PrefixTemplate
}
else if (Prefix.HasValue())
{
<div style="@Styles?.PrefixContainer" class="bit-tfl-pre @Classes?.PrefixContainer">
<div style="@Styles?.PrefixContainer"
class="bit-tfl-pre @Classes?.PrefixContainer">
<span style="@Styles?.Prefix" class="@Classes?.Prefix">
@Prefix
</span>
Expand Down Expand Up @@ -95,30 +98,44 @@
aria-label="@AriaLabel"
aria-labelledby="@(Label.HasValue() || LabelTemplate is not null ? _labelId : null)"
aria-describedby="@(Description.HasValue() || DescriptionTemplate is not null ? _descriptionId : null)" />

@if (ShowClearButton && CurrentValue.HasValue())
{
<button @onclick="HandleOnClearButtonClick"
type="button"
aria-label="Clear text"
disabled="@(IsEnabled is false)"
style="@Styles?.ClearButton"
class="bit-tfl-cbt @Classes?.ClearButton">
<i aria-hidden="true"
style="@Styles?.ClearButtonIcon"
class="bit-icon bit-icon--Cancel @Classes?.ClearButtonIcon" />
</button>
}
}

@if (CanRevealPassword && Type == BitInputType.Password)
{
<button @onclick="ToggleRevealPassword"
type="button"
style="@Styles?.RevealPassword"
class="bit-tfl-rpb @Classes?.RevealPassword"
type="button"
aria-label="@RevealPasswordAriaLabel"
aria-pressed="@(_elementType == BitInputType.Text ? "true" : "false")">
<span style="@Styles?.RevealPasswordIconContainer"
class="bit-tfl-rpc @Classes?.RevealPasswordIconContainer">
<i style="@Styles?.RevealPasswordIcon"
class="bit-tfl-rpi bit-icon bit-icon--@(_elementType == BitInputType.Text ? "Hide3" : "View") @Classes?.RevealPasswordIcon"
aria-hidden="true" />
<i aria-hidden="true"
style="@Styles?.RevealPasswordIcon"
class="bit-tfl-rpi bit-icon bit-icon--@(_elementType == BitInputType.Text ? "Hide3" : "View") @Classes?.RevealPasswordIcon" />
</span>
</button>
}

@if (IconName.HasValue())
{
<i style="@Styles?.Icon"
class="bit-tfl-ico bit-icon bit-icon--@IconName @Classes?.Icon"
aria-hidden="true" />
<i aria-hidden="true"
style="@Styles?.Icon"
class="bit-tfl-ico bit-icon bit-icon--@IconName @Classes?.Icon" />
}

@if (SuffixTemplate is not null)
Expand All @@ -127,30 +144,34 @@
}
else if (Suffix.HasValue())
{
<div style="@Styles?.SuffixContainer" class="bit-tfl-suf @Classes?.SuffixContainer">
<span style="@Styles?.Suffix" class="@Classes?.Suffix">
<div style="@Styles?.SuffixContainer"
class="bit-tfl-suf @Classes?.SuffixContainer">
<span style="@Styles?.Suffix"
class="@Classes?.Suffix">
@Suffix
</span>
</div>
}

</div>
</div>

@if (Description.HasValue() || DescriptionTemplate is not null)
{
<span style="@Styles?.DescriptionContainer"
class="bit-tfl-des @Classes?.DescriptionContainer"
id="@_descriptionId">
<span id="@_descriptionId"
style="@Styles?.DescriptionContainer"
class="bit-tfl-des @Classes?.DescriptionContainer">
@if (DescriptionTemplate is not null)
{
@DescriptionTemplate
}
else if (Description.HasValue())
{
<span style="@Styles?.Description" class="@Classes?.Description">
<span style="@Styles?.Description"
class="@Classes?.Description">
@Description
</span>
}
</span>
}
</div>
</div>
21 changes: 21 additions & 0 deletions src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,11 @@ public partial class BitTextField : BitTextInputBase<string?>
[Parameter, ResetClassBuilder]
public bool NoBorder { get; set; }

/// <summary>
/// Callback executed when the user clears the text field by clicking the clear button.
/// </summary>
[Parameter] public EventCallback OnClear { get; set; }

/// <summary>
/// Callback for when the input clicked.
/// </summary>
Expand Down Expand Up @@ -187,6 +192,11 @@ public partial class BitTextField : BitTextInputBase<string?>
/// </summary>
[Parameter] public int? Rows { get; set; }

/// <summary>
/// Whether to show the clear button when the text field has a value.
/// </summary>
[Parameter] public bool ShowClearButton { get; set; }

/// <summary>
/// Custom CSS styles for different parts of the BitTextField.
/// </summary>
Expand Down Expand Up @@ -425,6 +435,17 @@ private async Task HandleOnClick(MouseEventArgs e)
await OnClick.InvokeAsync(e);
}

private async Task HandleOnClearButtonClick()
{
if (IsEnabled is false || ReadOnly) return;

await SetCurrentValueAsStringAsync(string.Empty, true);

await InputElement.FocusAsync();

await OnClear.InvokeAsync();
}


protected override async ValueTask DisposeAsync(bool disposing)
{
Expand Down
50 changes: 49 additions & 1 deletion src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "../../../Styles/functions.scss";
@import "../../../Styles/functions.scss";

.bit-tfl {
margin: 0;
Expand Down Expand Up @@ -32,6 +32,14 @@
color: $clr-fg-dis;
}

.bit-tfl-cbt {
cursor: default;
color: $clr-fg-dis;
pointer-events: none;
background: $clr-bg-dis;
border: $shp-border-width $shp-border-style $clr-brd-dis;
}

&.bit-tfl-und {
.bit-tfl-wrp {
width: 100%;
Expand All @@ -55,6 +63,7 @@
}

&.bit-inv {

.bit-tfl-fgp,
.bit-tfl-wrp {
border-color: $clr-err;
Expand Down Expand Up @@ -162,6 +171,45 @@
color: var(--bit-tfl-clr);
}

.bit-tfl-cbt {
height: auto;
border: none;
cursor: pointer;
font-weight: 400;
width: spacing(4);
user-select: none;
color: $clr-fg-sec;
position: relative;
text-align: center;
outline: transparent;
text-decoration: none;
display: inline-block;
box-sizing: border-box;
padding: 0 spacing(0.5);
font-size: spacing(1.75);
font-family: $tg-font-family;
background-color: transparent;
border-radius: 0 spacing(0.125) spacing(0.125) 0;
min-height: calc(var(--bit-spa-scaling-factor) * 3.75);

i {
width: unset;
flex-shrink: 0;
height: spacing(2);
text-align: center;
margin: 0 spacing(0.5);
font-size: spacing(1.5);
line-height: spacing(2);
}

@media (hover: hover) {
&:hover {
color: $clr-fg-pri-hover;
background-color: $clr-bg-pri-hover;
}
}
}

.bit-tfl-ico {
color: $clr-fg-pri;
}
Expand Down
10 changes: 10 additions & 0 deletions src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldClassStyles.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,16 @@ public class BitTextFieldClassStyles
/// </summary>
public string? RevealPasswordIcon { get; set; }

/// <summary>
/// Custom CSS classes/styles for the BitTextField's clear button.
/// </summary>
public string? ClearButton { get; set; }

/// <summary>
/// Custom CSS classes/styles for the BitTextField's clear button icon.
/// </summary>
public string? ClearButtonIcon { get; set; }

/// <summary>
/// Custom CSS classes/styles for the BitTextField's icon.
/// </summary>
Expand Down
34 changes: 21 additions & 13 deletions ...nt/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@page "/components/textfield"
@page "/components/textfield"
@page "/components/text-field"

<PageOutlet Url="components/textfield"
Expand Down Expand Up @@ -142,7 +142,15 @@
</div>
</DemoExample>

<DemoExample Title="Binding" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
<DemoExample Title="ShowClearButton" RazorCode="@example9RazorCode" Id="example9">
<div>Displays BitTextField with a clear button that appears when the field has a value.</div>
<br />
<div class="example-box">
<BitTextField Label="Email" DefaultValue="example@email.com" ShowClearButton />
</div>
</DemoExample>

<DemoExample Title="Binding" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
<div>Demonstrates various binding scenarios with BitTextField, including one-way, two-way, on-change events, and immediate, debounce, and throttle options.</div>
<br />
<div class="example-box">
Expand All @@ -168,7 +176,7 @@
</div>
</DemoExample>

<DemoExample Title="Trim" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
<DemoExample Title="Trim" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
<div>Demonstrates various binding scenarios with BitTextField, including one-way, two-way, on-change events, and immediate, debounce, and throttle options.</div>
<br />
<div class="example-box">
Expand All @@ -182,7 +190,7 @@
</div>
</DemoExample>

<DemoExample Title="Validation" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
<DemoExample Title="Validation" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
<div>Demonstrates how validation can be applied to BitTextField, including required fields, numeric input, character constraints, email validation, and range validation.</div>
<br />
<div class="example-box">
Expand Down Expand Up @@ -219,7 +227,7 @@
</div>
</DemoExample>

<DemoExample Title="Background" RazorCode="@example12RazorCode" Id="example12">
<DemoExample Title="Background" RazorCode="@example13RazorCode" Id="example13">
<div>Providing a range of color kinds for the background of the text field.</div>
<br />
<div class="example-box" style="background:var(--bit-clr-bg-dis);padding:1rem">
Expand All @@ -233,7 +241,7 @@
</div>
</DemoExample>

<DemoExample Title="Border" RazorCode="@example13RazorCode" Id="example13">
<DemoExample Title="Border" RazorCode="@example14RazorCode" Id="example14">
<div>Providing a range of color kinds for the border of the text field.</div>
<br />
<div class="example-box" style="background:var(--bit-clr-bg-dis);padding:1rem">
Expand All @@ -247,7 +255,7 @@
</div>
</DemoExample>

<DemoExample Title="Accent" RazorCode="@example14RazorCode" Id="example14">
<DemoExample Title="Accent" RazorCode="@example15RazorCode" Id="example15">
<div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
<br />
<div class="example-box">
Expand All @@ -267,12 +275,12 @@
<br />
<BitTextField Label="Error" Accent="BitColor.Error" IconName="@BitIconName.Calendar" />
<br />
<div style="background:var(--bit-clr-fg-sec);padding:1rem">
<BitTextField Label="PrimaryBackground" Accent="BitColor.PrimaryBackground" IconName="@BitIconName.Calendar" />
<div style="background:var(--bit-clr-fg-dis);padding:1rem">
<BitTextField Label="PrimaryBackground" Background="BitColorKind.Transparent" Accent="BitColor.PrimaryBackground" IconName="@BitIconName.Calendar" />
<br />
<BitTextField Label="SecondaryBackground" Accent="BitColor.SecondaryBackground" IconName="@BitIconName.Calendar" />
<BitTextField Label="SecondaryBackground" Background="BitColorKind.Transparent" Accent="BitColor.SecondaryBackground" IconName="@BitIconName.Calendar" />
<br />
<BitTextField Label="TertiaryBackground" Accent="BitColor.TertiaryBackground" IconName="@BitIconName.Calendar" />
<BitTextField Label="TertiaryBackground" Background="BitColorKind.Transparent" Accent="BitColor.TertiaryBackground" IconName="@BitIconName.Calendar" />
</div>
<br />
<BitTextField Label="PrimaryForeground" Accent="BitColor.PrimaryForeground" IconName="@BitIconName.Calendar" />
Expand All @@ -289,7 +297,7 @@
</div>
</DemoExample>

<DemoExample Title="Style & Class" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
<DemoExample Title="Style & Class" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
<div>Explores styling and class customization for BitTextField, including component styles, custom classes, and detailed style options.</div>
<br /><br />
<div class="example-box">
Expand Down Expand Up @@ -318,7 +326,7 @@
</div>
</DemoExample>

<DemoExample Title="RTL" RazorCode="@example16RazorCode" Id="example16">
<DemoExample Title="RTL" RazorCode="@example17RazorCode" Id="example17">
<div>Use BitTextField in right-to-left (RTL).</div>
<br />
<div dir="rtl">
Expand Down
Loading
Loading