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
Displays various basic configurations for the BitTextField, including placeholders, disabled state, read-only mode, descriptions, and required fields.
This is Description
Underlined
Showcases the BitTextField with an underlined style, including variations with placeholders, disabled state, and required fields.
No border
Demonstrates BitTextField without borders, including variations for disabled and required fields.
Multiline
Displays BitTextField in multiline mode with options for resizable and fixed sizes, as well as setting the number of rows.
Icon
Shows how to add icons to the BitTextField component, including examples with different icon names.
Prefix & Suffix
Use prefixes and suffixes in BitTextField, including combinations and the disabled state.
https://
.com
https://
.com
https://
.com
Templates
Demonstrates the use of custom templates for labels, descriptions, prefixes, and suffixes in BitTextField.
Password
Shows BitTextField configured for password entry, including an option to reveal the password.
Binding
Demonstrates various binding scenarios with BitTextField, including one-way, two-way, on-change events, and immediate, debounce, and throttle options.
Value: []
Value: []
Value: []
Value: []
Value: []
Trim
Demonstrates various binding scenarios with BitTextField, including one-way, two-way, on-change events, and immediate, debounce, and throttle options.
[]
[]
Style & Class
Explores styling and class customization for BitTextField, including component styles, custom classes, and detailed style options.
Component's Style & Class:
Styles & Classes:
Validation
Demonstrates how validation can be applied to BitTextField, including required fields, numeric input, character constraints, email validation, and range validation.
RTL
Use BitTextField in right-to-left (RTL).
API
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. |
| 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. |
| IconName | string? | null | The icon name for the icon shown in the far right end of the text field. |
| InputMode | BitInputMode? | null | Sets the inputmode html attribute of the input element. |
| 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. |
| Multiline | bool | false | Whether or not the text field is a Multiline text field. |
| NoBorder | bool | false | Whether or not the text field is borderless. |
| OnClick | EventCallback<MouseEventArgs> | Callback for when the input clicked. | |
| 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. | |
| 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. |
| Resizable | bool | false | For multiline text fields, whether or not the field is resizable. |
| 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. |
| Rows | int? | null | For multiline text, Number of rows. |
| 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. |
| Trim | bool | false | Specifies whether to remove any leading or trailing whitespace from the value. |
| Type | BitInputType | BitInputType.Text | Input type. |
| Underlined | bool | false | Whether or not the text field is underlined. |
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. |
BitTextInputBase parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| AutoComplete | string? | null | Specifies the value of the autocomplete attribute of the input component. |
| AutoFocus | bool | false | Determines if the text input is auto focused on first render. |
| DebounceTime | int | 0 | The debounce time in milliseconds. |
| Immediate | bool | false | Change the content of the input field when the user write text (based on 'oninput' HTML event). |
| ThrottleTime | int | 0 | The throttle time in milliseconds. |
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. |
| 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. | |
| ReadOnly | bool | false | Makes the input read-only. |
| Required | bool | false | Makes the input required. |
| 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. |
BitInputType enum
Name |
Value |
Description |
|---|---|---|
| Text | 0 | The input expects text characters. |
| Password | 1 | The input expects password characters. |
| Number | 2 | The input expects number characters. |
| 3 | The input expects email characters. | |
| Tel | 4 | The input expects tel characters. |
| Url | 5 | The input expects url characters. |
BitInputMode enum
Name |
Value |
Description |
|---|---|---|
| None | 0 | The input expects text characters. |
| Text | 1 | Standard input keyboard for the user's current locale. |
| Decimal | 2 | Fractional numeric input keyboard containing the digits and decimal separator for the user's locale. |
| Numeric | 3 | Numeric input keyboard, but only requires the digits 0–9. |
| Tel | 4 | A telephone keypad input, including the digits 0–9, the asterisk (*), and the pound (#) key |
| Search | 5 | A virtual keyboard optimized for search input. |
| 6 | A virtual keyboard optimized for entering email addresses. | |
| Url | 7 | A keypad optimized for entering URLs. |
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. |
- On this page