- bit BlazorUI
Home Docs

TextField

Text fields give people a way to enter and edit text. They’re used in forms, modal dialogs, tables, and other surfaces where text input is required.

Usage

Basics




This is Description



Underline



No border


Multiline


Icon

Prefix & Suffix
https://

.com

https://
.com

https://
.com
Templates



Password

Binding


Trim

[]




[]
Style & Class
Component's Style & Class:





Styles & Classes:


Validation





RTL

Implementation

BitTextField parameters
Name
Type
Default value
Description
AutoComplete string? null AutoComplete is a string that maps to the autocomplete attribute of the HTML input element.
AutoFocus bool false Determines if the text field is auto focused on first render.
CanRevealPassword bool false Whether to show the reveal password button for input type 'password'.
Classes BitTextFieldClassStyles? null Custom CSS classes for different parts of the BitTextField.
DefaultValue string? null Default value of the text field. Only provide this if the text field is an uncontrolled component; otherwise, use the value property.
Description string? null Description displayed below the text field to provide additional details about what text to enter.
DescriptionTemplate RenderFragment? null Shows the custom description for text field.
HasBorder bool true Whether or not the text field is borderless.
IsMultiline bool false Whether or not the text field is a Multiline text field.
IsReadOnly bool false If true, the text field is readonly.
IsRequired bool false Whether the associated input is required or not, add an asterisk "*" to its label.
IsUnderlined bool false Whether or not the text field is underlined.
IsResizable bool true For multiline text fields, whether or not the field is resizable.
IconName string? null The icon name for the icon shown in the far right end of the text field.
IsTrimmed bool false Specifies whether to remove any leading or trailing whitespace from the value.
Label string? null Label displayed above the text field and read by screen readers.
LabelTemplate RenderFragment? null Shows the custom label for text field.
MaxLength int -1 Specifies the maximum number of characters allowed in the input.
OnFocus EventCallback<FocusEventArgs> Callback for when focus moves into the input.
OnFocusIn EventCallback<FocusEventArgs> Callback for when focus moves into the input.
OnFocusOut EventCallback<FocusEventArgs> Callback for when focus moves out of the input.
OnKeyDown EventCallback<KeyboardEventArgs> Callback for when a keyboard key is pressed.
OnKeyUp EventCallback<KeyboardEventArgs> Callback for When a keyboard key is released.
OnChange EventCallback<string?> Callback for when the input value changes. This is called on both input and change events.
OnClick EventCallback<MouseEventArgs> Callback for when the input clicked.
Placeholder string? null Input placeholder text.
Prefix string? null Prefix displayed before the text field contents. This is not included in the value. Ensure a descriptive label is present to assist screen readers, as the value does not include the prefix.
PrefixTemplate RenderFragment? null Shows the custom prefix for text field.
Rows int 3 For multiline text, Number of rows.
RevealPasswordAriaLabel string? null Suffix displayed after the text field contents. This is not included in the value. Ensure a descriptive label is present to assist screen readers, as the value does not include the suffix.
Styles BitTextFieldClassStyles? null Custom CSS styles for different parts of the BitTextField.
Suffix string? null Suffix displayed after the text field contents. This is not included in the value. Ensure a descriptive label is present to assist screen readers, as the value does not include the suffix.
SuffixTemplate RenderFragment? null Shows the custom suffix for text field.
Type BitTextFieldType BitTextFieldType.Text Input type.
BitTextField public members
Name
Type
Default value
Description
InputElement ElementReference The ElementReference to the input element of the BitTextField.
FocusAsync ValueTask Gives focus to the input element of the BitTextField.
BitInputBase parameters
Name
Type
Default value
Description
DisplayName string? null Gets or sets the display name for this field.
InputHtmlAttributes IReadOnlyDictionary<string, object>? null Gets or sets a collection of additional attributes that will be applied to the created element.
Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitTextFieldClassStyles properties
Name
Type
Default value
Description
Root string? null Custom CSS classes/styles for the BitTextField's root element.
Focused string? null Custom CSS classes/styles of the root element in focus state.
InputWrapper string? null Custom CSS classes/styles for the wrapper of label and input in the BitTextField.
Label string? null Custom CSS classes/styles for the BitTextField's label.
FieldGroup string? null Custom CSS classes/styles for the BitTextField's field group.
PrefixContainer string? null Custom CSS classes/styles for the BitTextField's prefix container.
Prefix string? null Custom CSS classes/styles for the BitTextField's prefix.
Input string? null Custom CSS classes/styles for the BitTextField's input.
RevealPassword string? null Custom CSS classes/styles for the BitTextField's reveal password.
RevealPasswordIconContainer string? null Custom CSS classes/styles for the BitTextField's reveal password icon container.
RevealPasswordIcon string? null Custom CSS classes/styles for the BitTextField's reveal password icon.
Icon string? null Custom CSS classes/styles for the BitTextField's icon.
SuffixContainer string? null Custom CSS classes/styles for the BitTextField's suffix container.
Suffix string? null Custom CSS classes/styles for the BitTextField's suffix.
DescriptionContainer string? null Custom CSS classes/styles for the BitTextField's description container.
Description string? null Custom CSS classes/styles for the BitTextField's description.
BitVisibility enum
Name
Value
Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).
BitDir enum
Name
Value
Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.