TextField - 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

Basic


This is Description


AutoFocus
IsUnderlined


HasBorder


IsMultiline


Icon

Prefix & Suffix
https://

.com

https://
.com

https://
.com
Templates



Password types

Controlled



IsTrimmed
The trim property removes whitespaces from both sides of a string.
[]

[]
Style & Class


Visibility
Visible: [
]
Hidden: [ ]
Collapsed: [ ]
Validation






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.
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.
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
Description string? null Custom CSS classes/styles for the text field's description.
DescriptionContainer string? null Custom CSS classes/styles for the text field's description container.
Label string? null Custom CSS classes/styles for the text field's label.
FieldGroup string? null Custom CSS classes/styles for the text field's field group.
Focused string? null Custom CSS classes/styles of the root element in focus state.
Icon string? null Custom CSS classes/styles for the text field's icon.
Input string? null Custom CSS classes/styles for the text field's input.
InputIcon string? null Custom CSS classes/styles for the text field's input icon.
InputWrapper string? null Custom CSS classes/styles for the wrapper of label and input in the text field.
Prefix string? null Custom CSS classes/styles for the text field's prefix.
PrefixContainer string? null Custom CSS classes/styles for the text field's prefix container.
RevealPassword string? null Custom CSS classes/styles for the text field's reveal password.
RevealPasswordIcon string? null Custom CSS classes/styles for the text field's reveal password icon.
RevealPasswordIconContainer string? null Custom CSS classes/styles for the text field's reveal password icon container.
Root string? null Custom CSS classes/styles for the text field's root element.
Suffix string? null Custom CSS classes/styles for the text field's suffix.
SuffixContainer string? null Custom CSS classes/styles for the text field's suffix container.
BitTextFieldType enum
Name
Value
Description
Text 0 The TextField characters are shown as text.
Password 1 The TextField characters are masked.
Number 2 The TextField characters are number.
Email 3 The TextField act as an email input.
Tel 4 The TextField act as a tel input.
Url 5 The TextField act as a url input.
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).