diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor
index 5f88314ea2..83b39b3168 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor
@@ -1,4 +1,4 @@
-@namespace Bit.BlazorUI
+@namespace Bit.BlazorUI
 @inherits BitTextInputBase<string?>
 
 <div @ref="RootElement" @attributes="HtmlAttributes"
@@ -6,7 +6,8 @@
      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">
@@ -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>
@@ -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)
@@ -127,8 +144,10 @@
             }
             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>
@@ -136,21 +155,23 @@
 
         </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>
\ No newline at end of file
+</div>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs
index aea46d845b..63fc72a8f5 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs
@@ -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>
@@ -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>
@@ -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)
     {
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss
index 8947adf86c..c8436cb362 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss
@@ -1,4 +1,4 @@
-@import "../../../Styles/functions.scss";
+@import "../../../Styles/functions.scss";
 
 .bit-tfl {
     margin: 0;
@@ -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%;
@@ -55,6 +63,7 @@
     }
 
     &.bit-inv {
+
         .bit-tfl-fgp,
         .bit-tfl-wrp {
             border-color: $clr-err;
@@ -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;
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldClassStyles.cs
index ae0d700ae4..2ea2fc1897 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldClassStyles.cs
@@ -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>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor
index 246826090b..e6c84bff94 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor
@@ -1,4 +1,4 @@
-@page "/components/textfield"
+@page "/components/textfield"
 @page "/components/text-field"
 
 <PageOutlet Url="components/textfield"
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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" />
@@ -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">
@@ -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">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor.cs
index 1df5172335..3ad40d7561 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor.cs
@@ -133,6 +133,12 @@ public partial class BitTextFieldDemo
             Description = "Whether or not the text field is borderless.",
         },
         new()
+        {
+            Name = "OnClear",
+            Type = "EventCallback",
+            Description = "Callback executed when the user clears the text field by clicking the clear button.",
+        },
+        new()
         {
             Name = "OnClick",
             Type = "EventCallback<MouseEventArgs>",
@@ -224,6 +230,13 @@ public partial class BitTextFieldDemo
             Description = "For multiline text, Number of rows.",
         },
         new()
+        {
+            Name = "ShowClearButton",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether to show the clear button when the text field has a value.",
+        },
+        new()
         {
             Name = "Styles",
             Type = "BitTextFieldClassStyles?",
@@ -358,6 +371,20 @@ public partial class BitTextFieldDemo
                     Description = "Custom CSS classes/styles for the BitTextField's reveal password icon."
                 },
                 new()
+                {
+                    Name = "ClearButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the BitTextField's clear button."
+                },
+                new()
+                {
+                    Name = "ClearButtonIcon",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the BitTextField's clear button icon."
+                },
+                new()
                 {
                     Name = "Icon",
                     Type = "string?",
@@ -768,6 +795,9 @@ private void HandleInvalidSubmit()
 <BitTextField Label=""Reveal Password"" Type=""BitInputType.Password"" CanRevealPassword />";
 
     private readonly string example9RazorCode = @"
+<BitTextField Label=""Email"" DefaultValue=""example@email.com"" ShowClearButton />";
+
+    private readonly string example10RazorCode = @"
 <BitTextField Label=""One-way"" Value=""@oneWayValue"" />
 <div>Value: [@oneWayValue]</div>
 <BitOtpInput Length=""5"" Style=""margin-top: 5px;"" @bind-Value=""oneWayValue"" />
@@ -787,7 +817,7 @@ private void HandleInvalidSubmit()
 
 <BitTextField Label=""Throttle"" @bind-Value=""@throttleValue"" Immediate ThrottleTime=""300"" />
 <div>Value: [@throttleValue]</div>";
-    private readonly string example9CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 private string oneWayValue;
 private string twoWayValue;
 private string onChangeValue;
@@ -795,17 +825,17 @@ private void HandleInvalidSubmit()
 private string? debounceValue;
 private string? throttleValue;";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example11RazorCode = @"
 <BitTextField Label=""Trimmed"" Trim @bind-Value=""trimmedValue"" />
 <pre>[@trimmedValue]</pre>
 
 <BitTextField Label=""Not Trimmed"" @bind-Value=""notTrimmedValue"" />
 <pre>[@notTrimmedValue]</pre>";
-    private readonly string example10CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 private string trimmedValue;
 private string notTrimmedValue;";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example12RazorCode = @"
 <style>
     .validation-message {
         color: red;
@@ -833,7 +863,7 @@ private void HandleInvalidSubmit()
 
     <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
 </EditForm>";
-    private readonly string example11CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 public class ValidationTextFieldModel
 {
     [Required(ErrorMessage = ""This field is required."")]
@@ -857,42 +887,42 @@ public class ValidationTextFieldModel
 private void HandleValidSubmit() { }
 private void HandleInvalidSubmit() { }";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example13RazorCode = @"
 <BitTextField Label=""Primary"" Background=""BitColorKind.Primary"" IconName=""@BitIconName.Calendar"" />
 <BitTextField Label=""Secondary"" Background=""BitColorKind.Secondary"" IconName=""@BitIconName.Calendar"" />
 <BitTextField Label=""Tertiary"" Background=""BitColorKind.Tertiary"" IconName=""@BitIconName.Calendar"" />
 <BitTextField Label=""Transparent"" Background=""BitColorKind.Transparent"" IconName=""@BitIconName.Calendar"" />";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example14RazorCode = @"
 <BitTextField Label=""Primary"" Border=""BitColorKind.Primary"" />
 <BitTextField Label=""Secondary"" Border=""BitColorKind.Secondary"" />
 <BitTextField Label=""Tertiary"" Border=""BitColorKind.Tertiary"" />
 <BitTextField Label=""Transparent"" Border=""BitColorKind.Transparent"" />";
 
-    private readonly string example14RazorCode = @"
-<BitTextField Label=""Primary"" Color=""BitColor.Primary"" IconName=""@BitIconName.Calendar"" />
-<BitTextField Label=""Secondary"" Color=""BitColor.Secondary"" IconName=""@BitIconName.Calendar"" />
-<BitTextField Label=""Tertiary"" Color=""BitColor.Tertiary"" IconName=""@BitIconName.Calendar"" />
+    private readonly string example15RazorCode = @"
+<BitTextField Label=""Primary"" Accent=""BitColor.Primary"" IconName=""@BitIconName.Calendar"" />
+<BitTextField Label=""Secondary"" Accent=""BitColor.Secondary"" IconName=""@BitIconName.Calendar"" />
+<BitTextField Label=""Tertiary"" Accent=""BitColor.Tertiary"" IconName=""@BitIconName.Calendar"" />
 
-<BitTextField Label=""Info"" Color=""BitColor.Info"" IconName=""@BitIconName.Calendar"" />
-<BitTextField Label=""Success"" Color=""BitColor.Success"" IconName=""@BitIconName.Calendar"" />
-<BitTextField Label=""Warning"" Color=""BitColor.Warning"" IconName=""@BitIconName.Calendar"" />
-<BitTextField Label=""SevereWarning"" Color=""BitColor.SevereWarning"" IconName=""@BitIconName.Calendar"" />
-<BitTextField Label=""Error"" Color=""BitColor.Error"" IconName=""@BitIconName.Calendar"" />
+<BitTextField Label=""Info"" Accent=""BitColor.Info"" IconName=""@BitIconName.Calendar"" />
+<BitTextField Label=""Success"" Accent=""BitColor.Success"" IconName=""@BitIconName.Calendar"" />
+<BitTextField Label=""Warning"" Accent=""BitColor.Warning"" IconName=""@BitIconName.Calendar"" />
+<BitTextField Label=""SevereWarning"" Accent=""BitColor.SevereWarning"" IconName=""@BitIconName.Calendar"" />
+<BitTextField Label=""Error"" Accent=""BitColor.Error"" IconName=""@BitIconName.Calendar"" />
 
-<BitTextField Label=""PrimaryBackground"" Color=""BitColor.PrimaryBackground"" IconName=""@BitIconName.Calendar"" />
-<BitTextField Label=""SecondaryBackground"" Color=""BitColor.SecondaryBackground"" IconName=""@BitIconName.Calendar"" />
-<BitTextField Label=""TertiaryBackground"" Color=""BitColor.TertiaryBackground"" IconName=""@BitIconName.Calendar"" />
+<BitTextField Label=""PrimaryBackground"" Accent=""BitColor.PrimaryBackground"" IconName=""@BitIconName.Calendar"" />
+<BitTextField Label=""SecondaryBackground"" Accent=""BitColor.SecondaryBackground"" IconName=""@BitIconName.Calendar"" />
+<BitTextField Label=""TertiaryBackground"" Accent=""BitColor.TertiaryBackground"" IconName=""@BitIconName.Calendar"" />
 
-<BitTextField Label=""PrimaryForeground"" Color=""BitColor.PrimaryForeground"" IconName=""@BitIconName.Calendar"" />
-<BitTextField Label=""SecondaryForeground"" Color=""BitColor.SecondaryForeground"" IconName=""@BitIconName.Calendar"" />
-<BitTextField Label=""TertiaryForeground"" Color=""BitColor.TertiaryForeground"" IconName=""@BitIconName.Calendar"" />
+<BitTextField Label=""PrimaryForeground"" Accent=""BitColor.PrimaryForeground"" IconName=""@BitIconName.Calendar"" />
+<BitTextField Label=""SecondaryForeground"" Accent=""BitColor.SecondaryForeground"" IconName=""@BitIconName.Calendar"" />
+<BitTextField Label=""TertiaryForeground"" Accent=""BitColor.TertiaryForeground"" IconName=""@BitIconName.Calendar"" />
 
-<BitTextField Label=""PrimaryBorder"" Color=""BitColor.PrimaryBorder"" IconName=""@BitIconName.Calendar"" />
-<BitTextField Label=""SecondaryBorder"" Color=""BitColor.SecondaryBorder"" IconName=""@BitIconName.Calendar"" />
-<BitTextField Label=""TertiaryBorder"" Color=""BitColor.TertiaryBorder"" IconName=""@BitIconName.Calendar"" />";
+<BitTextField Label=""PrimaryBorder"" Accent=""BitColor.PrimaryBorder"" IconName=""@BitIconName.Calendar"" />
+<BitTextField Label=""SecondaryBorder"" Accent=""BitColor.SecondaryBorder"" IconName=""@BitIconName.Calendar"" />
+<BitTextField Label=""TertiaryBorder"" Accent=""BitColor.TertiaryBorder"" IconName=""@BitIconName.Calendar"" />";
 
-    private readonly string example15RazorCode = @"
+    private readonly string example16RazorCode = @"
 <style>
     .custom-class {
         overflow: hidden;
@@ -1001,10 +1031,10 @@ private void HandleValidSubmit() { }
                                  Focused = ""custom-focus"",
                                  Input = ""custom-input"",
                                  Label = $""custom-label{(string.IsNullOrEmpty(classesValue) ? string.Empty : "" custom-label-top"")}"" })"" />";
-    private readonly string example15CsharpCode = @"
+    private readonly string example16CsharpCode = @"
 private string? classesValue;";
 
-    private readonly string example16RazorCode = @"
+    private readonly string example17RazorCode = @"
 <BitTextField Dir=""BitDir.Rtl""
               Placeholder=""پست الکترونیکی""
               IconName=""@BitIconName.EditMail"" />