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
Value: []
Value: []
Value: []
Value: []
Value: []
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. | |
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 |
---|---|---|---|
DebounceTime | int | 0 | The debounce time in milliseconds. |
DisplayName | string? | null | Gets or sets the display name for this field. |
Immediate | bool | false | Change the content of the input field when the user write text (based on 'oninput' HTML event). |
InputHtmlAttributes | IReadOnlyDictionary<string, object>? | null | Gets or sets a collection of additional attributes that will be applied to the created element. |
Name | string? | null | Gets or sets the name of the element. Allows access by name from the associated form. |
OnChange | EventCallback<TValue?> | Callback for when the input value changes. | |
ThrottleTime | int | 0 | The throttle time in milliseconds. |
Value | TValue? | null | Gets or sets the value of the input. This should be used with two-way binding. |
BitInputBase public members
Name |
Type |
Default value |
Description |
---|---|---|---|
InputElement | ElementReference | The ElementReference of the input element. | |
FocusAsync() | () => ValueTask | Gives focus to the input element. | |
FocusAsync(bool preventScroll) | (bool preventScroll) => ValueTask | Gives focus to the input element. |
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. |