Skip to content
BlazorUI

Extras

PhoneInput

Bit.BlazorUI.Extras

BitPhoneInput pairs a searchable country selector - flag, name and dialing code - with a tel input. Value always holds the full number in E.164 form (+[code][number]), while the local digits and the country stay bindable on their own through Number and Country. A typed or pasted international prefix picks its country, the digits can be laid out over a per-country pattern, and the whole field is keyboard and screen-reader operable.

Notes

To use this component, you need to install the Bit.BlazorUI.Extras(opens in a new tab) nuget package, as described in the Optional steps of the Getting started page.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

DefaultCountry sets the starting country without taking control of it, and Placeholder hints the number. The typed digits are combined with the dialing code into the E.164 Value (+14155550123). Typing or pasting a number that starts with + or 00 selects its country on its own; separators are kept in the field but never reach the value.

AutoFocus

AutoFocus puts the caret in the number input on the first render - for a page or a dialog whose only job is that one field.

Label & description

Label (or LabelTemplate) names the number input and the field as a whole, so the country selector is announced as part of it. Required adds the asterisk and aria-required. Description (or DescriptionTemplate) writes a hint under the field, tied to the input through aria-describedby.

We will text you a code to confirm it.

Custom countries

Countries replaces the built-in list (BitCountries.All) and ExcludeCountries trims it. Both also limit the dialing-code lookup, so a pasted number with a code outside the list is kept whole rather than attached to the wrong country.

Countries (five markets):

ExcludeCountries (every country but these three):

Preferred countries

PreferredCountries pins countries to the top of the list, set apart by a rule. They also settle a dialing code shared by several countries (+1, +7); otherwise BitCountry.Priority does, and the current selection always wins over both.

Search box

The search matches names (accents folded, word starts), ISO codes and dialing codes (+44, 0044 and 44 alike), and the result count is announced to screen readers. SearchBoxPlaceholder, SearchBoxAriaLabel and NoResultsMessage set its texts. NoSearchBox removes it; the selector then answers to type-ahead, open or closed (united s reaches the United States).

Dropdown display

NoFlags and NoDialCode trim the selector, DropdownPlaceholder fills it while no country is selected, and FlagUrlSelector serves the flags from your own source (returning null keeps the built-in one). NoDropdown fixes the country: it is shown and read to screen readers, but can only be set through the parameters - a pasted +44 number does not move it.

NoFlags:

NoDialCode:

DropdownPlaceholder:

FlagUrlSelector:

NoDropdown:
Country: Japan

Clear button

ShowClearButton adds a button that empties the number (keeping the country), returns the focus to the input, raises OnClear and tells a screen reader "Cleared" (ClearedAnnouncement rephrases it; an empty string silences it). Its icon comes from ClearButtonIconName, its content from ClearButtonTemplate.


Last cleared at:

Strict & MaxLength

Strict drops every typed or pasted character that cannot be part of a number. MaxLength caps the text in the field, separators included.

Strict (try letters or symbols):

MaxLength="10":

Variants

FullWidth stretches the field to its container, NoBorder removes the frame, and Underlined keeps only a bottom rule that thickens on focus. Background and Border take the fill and the frame from the neutral color kinds, for a field on a surface other than the primary one.



Immediate

The value updates on the change event by default. Immediate updates it on every keystroke, and DebounceTime or ThrottleTime rate-limit those updates.

Immediate:
Value: []

Immediate + DebounceTime (500ms):
Value: []

Immediate + ThrottleTime (500ms):
Value: []

Binding

Value (full E.164 number), Number (local part) and Country are all two-way bindable and stay in step: a full number assigned from outside is split back into its parts. The national prefix a number is written with at home (the 0 of 0170 1234567) is dropped from Value, keeping it valid E.164, unless KeepNationalPrefix is set. The text field below is bound to the same Value.



Value (full number):
Number (local):
Country: Germany

Format as you type

Mask lays the digits over a pattern where every # is a digit slot - (###) ###-#### shows 4155550123 as (415) 555-0123 - while the Value stays plain E.164 and the caret keeps its place. MaskSelector gives each country its own pattern (null leaves it unformatted), and AutoPlaceholder shows that pattern as the placeholder.

Mask:
Value: []

MaskSelector (United States, France, Germany):
Value: []

MaskSelector + AutoPlaceholder:

Validation

Inside an EditForm the data annotations validate the full E.164 Value and the field gets aria-invalid; NoValidate opts out. Outside a form, Invalid marks the field and ErrorMessage (or ErrorMessageTemplate) also writes the reason under it, referenced by aria-describedby and announced when it appears.

That number is already registered.
Spanish mobile numbers are nine digits long.
That number is already registered.​


Disabled & ReadOnly

Disabled dims both halves and takes them out of the tab order. ReadOnly keeps the number focusable and copyable while refusing edits and country changes; the selector drops its caret and its country is read out with the number.

Disabled:

ReadOnly:

Callout

DropDirection (TopAndBottom by default, or All) and MaxHeight place and size the list. The arrow keys wrap at its ends unless NoWrapNavigation is set; Home, End, Page Up and Page Down move through it too, and Escape or Alt+Up close it. Responsive turns it into a full-height side panel on small screens, with the Label and a close button (ResponsiveCloseIconName, ResponsiveCloseButtonAriaLabel) - narrow the window to see it.

DropDirection="All" + MaxHeight="200":

NoWrapNavigation (open it and hold the up arrow):

Templates

DropdownTemplate renders the selector's content from the selected country, ItemTemplate each row, and NoResultsTemplate the empty result.

Events

OnCountryChange fires for a picked or a typed-in country, OnOpen / OnClose follow the list, OnSearch reports the search term and OnChange the E.164 value. The number input also raises OnFocus, OnBlur, OnFocusIn, OnFocusOut, OnClick, OnKeyDown, OnEnter and OnEscape.


Selected country:
Value:
Search text:
Callout: closed
Enter pressed: 0

Programmatic control

IsOpen is two-way bindable, and a reference offers OpenAsync, CloseAsync, SelectCountryAsync, SetNumberAsync (which resolves an international prefix the way typing does), ClearAsync, FocusAsync and FullNumber. Picking a country moves the focus to the number input unless NoFocusOnSelect is set.



IsOpen: False

Form submission

For a plain HTML form, Name posts the full E.164 Value through a hidden field (the visible input holds only the local part), and CountryName posts the ISO 3166-1 alpha-2 code of the country.


Posted as phone:
Posted as phoneCountry: CA

Keyboard & autofill

The number is a tel input with autocomplete="tel" and no spellcheck or autocorrect. AutoComplete names another autofill token (tel-national, off), InputMode another on-screen keyboard, and EnterKeyHint labels its return key.

Localization

Every text the field shows or announces can be translated. Country names come from Countries; DropdownAriaLabel prefixes the selector's spoken name ("Land: Deutschland"); the search box, the empty result and the clear button take SearchBoxPlaceholder, SearchBoxAriaLabel, NoResultsMessage and ClearButtonAriaLabel; and SearchResultsAnnouncement phrases the result count a screen reader hears.

Cascading parameters

BitParams hands a BitPhoneInputParams to every phone input under it - the app's market, country list, look and translated texts, set once. The visitor's own country is BitCountries.FindByIso2(RegionInfo.CurrentRegion.TwoLetterISORegionName). A field keeps any parameter it sets itself. What belongs to one field only (Value, Number, Country, IsOpen, Name, CountryName, Invalid, ErrorMessage, AutoFocus and the events) is not cascaded.


Color

Color paints the frame and the focus ring in one of the general colors - a semantic one or a neutral family. A Border kind, when set, takes the frame back and leaves Color the ring.

External Icons

ClearButtonIcon and ResponsiveCloseIcon take icons from any CSS-class based library (FontAwesome, Bootstrap Icons) as raw classes or through the BitIconInfo helpers, and win over their ...IconName counterparts. Reference the library's stylesheet in your app.

Size

Size scales the height, padding, text, flags and list rows together.

Style & Class

The public --bit-PhoneInput-* custom properties (see the CSS variables table) re-skin the field without a selector: on :root for the whole app, on an ancestor for the fields inside it, or in one field's Style. The country list is moved to the end of the body while it is open, yet it keeps inheriting from the field and every ancestor of it, so a variable set in any of those places re-skins the list as well. They restyle the default, not a choice: an explicit Color, Background, Border or Size wins over the variables for what it sets. Style and Class reach the root, Styles and Classes every part by name.

CSS variables on one field (open its list too):

CSS variables on an ancestor (open its list too):

Style, Class, Styles and Classes:

RTL

Dir="BitDir.Rtl" mirrors the field, the callout and the responsive panel, while the number itself stays left to right so its digits and separators keep their order.

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone, as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component falls back to the theme token beside it.

BitPhoneInput CSS variables

Name Default value Description
--bit-PhoneInput-background --bit-clr-bg-pri Fill of the field. The Background parameter wins over it.
--bit-PhoneInput-color --bit-clr-fg-pri Text of the number.
--bit-PhoneInput-placeholder-color --bit-clr-fg-sec Placeholder of the number input, of the country selector and of the search box.
--bit-PhoneInput-border-color --bit-clr-brd-pri Frame at rest. The Border and Color parameters win over it.
--bit-PhoneInput-hover-border-color --bit-clr-brd-pri-hover Frame under a pointer, on devices that can hover. The Border and Color parameters win over it.
--bit-PhoneInput-border-width --bit-shp-brd-width Thickness of the frame and of the rule between the selector and the number.
--bit-PhoneInput-radius --bit-shp-radius-control Corner radius of the frame.
--bit-PhoneInput-min-height --bit-siz-ctrl-md Smallest height of the frame. The Size parameter wins over it.
--bit-PhoneInput-font-size --bit-tpg-fs-sm Text size of the field and of the country list. The Size parameter wins over it.
--bit-PhoneInput-padding 0 --bit-siz-ctrl-pad-x-md Padding of the number input. The Size parameter wins over it.
--bit-PhoneInput-focus-color --bit-clr-pri-focus Focused frame and focus ring, and the keyboard cues of the selector, the clear button and the active row of the list. The Color parameter wins over it. While it is unset, the focus ring is the library's own --bit-shd-focus-ring, so replacing that token re-shapes it too.
--bit-PhoneInput-invalid-color --bit-clr-err / --bit-clr-err-focus Frame, focus ring and error message of a rejected value.
--bit-PhoneInput-disabled-color --bit-clr-fg-dis Text and glyphs when disabled.
--bit-PhoneInput-disabled-background --bit-clr-bg-dis Fill when disabled.
--bit-PhoneInput-disabled-border-color --bit-clr-brd-dis Frame when disabled.
--bit-PhoneInput-dropdown-background transparent Fill of the country selector.
--bit-PhoneInput-dropdown-hover-background --bit-clr-bg-pri-hover Fill of the country selector under a pointer.
--bit-PhoneInput-dropdown-color --bit-clr-fg-pri The dialing code in the country selector.
--bit-PhoneInput-dropdown-padding 0 --bit-siz-ctrl-pad-x-md Padding of the country selector. The Size parameter wins over it.
--bit-PhoneInput-separator-color --bit-clr-brd-pri Rule between the country selector and the number.
--bit-PhoneInput-caret-color --bit-clr-fg-sec The caret of the country selector.
--bit-PhoneInput-flag-size --bit-siz-icon-md Flags of the selector and of the list. The Size parameter wins over it.
--bit-PhoneInput-flag-radius --bit-shp-radius-none Corner radius of a flag.
--bit-PhoneInput-button-color --bit-clr-fg-sec Glyph of the clear button.
--bit-PhoneInput-button-hover-background --bit-clr-bg-pri-hover Fill of the clear button under a pointer.
--bit-PhoneInput-label-color --bit-clr-fg-pri Label text.
--bit-PhoneInput-label-font-size --bit-PhoneInput-font-size Label text size. The Size parameter wins over it.
--bit-PhoneInput-label-font-weight --bit-tpg-field-label-font-weight Label weight.
--bit-PhoneInput-required-color --bit-clr-req The asterisk of a Required field.
--bit-PhoneInput-description-color --bit-clr-fg-sec Description text.
--bit-PhoneInput-footer-font-size --bit-tpg-fs-2xs Text size of the description and of the error message.
--bit-PhoneInput-callout-background --bit-clr-bg-pri The surface of the country list.
--bit-PhoneInput-callout-border-color --bit-clr-brd-pri Border of the country list, and the rules under its search box and under the preferred countries.
--bit-PhoneInput-callout-radius --bit-shp-radius-popup Corner radius of the country list.
--bit-PhoneInput-callout-shadow --bit-shd-popup (--bit-shd-sheet for the responsive panel) Elevation of the country list.
--bit-PhoneInput-callout-max-height --bit-siz-popup-max-height Tallest the scrolling list grows. The MaxHeight parameter wins over it.
--bit-PhoneInput-responsive-width spacing(34) Width of the side panel a Responsive field opens on a small screen.
--bit-PhoneInput-overlay-background transparent The layer behind an open list; give it a color for a modal-style scrim.
--bit-PhoneInput-item-height --bit-siz-item-md Smallest height of a row of the list. The Size parameter wins over it.
--bit-PhoneInput-item-color --bit-clr-fg-pri Country name of a row, and the text of the search box.
--bit-PhoneInput-item-code-color --bit-clr-fg-sec Dialing code of a row.
--bit-PhoneInput-item-hover-background --bit-clr-bg-pri-hover Row under the pointer, and the row the arrow keys are on.
--bit-PhoneInput-item-selected-background --bit-clr-bg-sec The selected row.
--bit-PhoneInput-item-selected-color --bit-PhoneInput-item-color Text of the selected row.

API

Every parameter, public member, sub-class and enum this component exposes.

BitPhoneInput parameters

Name Type Default value Description
AutoFocus bool false Determines if the number input is auto focused on first render.
AutoPlaceholder bool false Shows the pattern the number is currently formatted with as the placeholder of the number input, filling in only when no Placeholder of its own is given.
Background BitColorKind? null The color kind of the fill of the phone input. An explicit value wins over --bit-PhoneInput-background; left unset, the fill is the primary kind unless it says otherwise.
Border BitColorKind? null The color kind of the frame of the phone input, winning over the main color of Color (which keeps the focus ring). An explicit value wins over --bit-PhoneInput-border-color and --bit-PhoneInput-hover-border-color; left unset, the frame is the primary border unless an explicit Color or those variables say otherwise.
Classes BitPhoneInputClassStyles? null Custom CSS classes for different parts of the BitPhoneInput.
ClearButtonAriaLabel string? null The aria-label of the clear button of the number input.
ClearButtonIcon BitIconInfo? null The icon of the clear button of the number input. Takes precedence over ClearButtonIconName when both are set, and renders icons from external libraries like FontAwesome or Bootstrap Icons.
ClearButtonIconName string? null The icon name of the clear button of the number input from the Fluent UI icon set.
ClearButtonTemplate RenderFragment? null The custom template for the clear button of the number input.
ClearedAnnouncement string? null What a screen reader announces once the number has been emptied, in place of the default "Cleared". An empty string keeps the clearing from being announced.
Color BitColor? null The general color of the phone input: the frame takes its main color and the focus ring its focus color. An explicit value wins over --bit-PhoneInput-focus-color and the --bit-PhoneInput-* border colors (an explicit Border still wins the frame); left unset, the field is primary unless those variables say otherwise.
Countries ICollection<BitCountry> BitCountries.All The list of the countries to show in the country dropdown.
Country BitCountry? null The currently selected country of the phone input. (two-way bound)
CountryName string? null The name of the hidden field carrying the ISO 3166-1 alpha-2 code of the selected country, for a plain HTML form that stores the country beside the number.
DebounceTime int 0 The debounce time in milliseconds for the number input (applied when Immediate is enabled).
DefaultCountry BitCountry? null The default selected country to be initially used when the Country parameter is not set.
Description string? null The description shown under the phone input, tied to the number input through aria-describedby.
DescriptionTemplate RenderFragment? null The custom template for the description of the phone input.
DropDirection BitDropDirection BitDropDirection.TopAndBottom Determines the allowed drop directions of the country dropdown callout.
DropdownAriaLabel string? null The accessible name of the country selector ("Country" by default), which the name of the selected country is appended to ("Country: Germany"). It also names the country list. Set it to translate the selector for a screen reader.
DropdownPlaceholder string? null The placeholder text of the country dropdown when no country is selected.
DropdownTemplate RenderFragment<BitCountry?>? null The custom template for the content of the country dropdown button, receiving the selected country.
EnterKeyHint string? null Sets the enterkeyhint html attribute of the number input, which decides the label of the return key of an on-screen keyboard.
ErrorMessage string? null The error message shown under the phone input, which also puts the field in its invalid state.
ErrorMessageTemplate RenderFragment? null The custom template for the error message of the phone input, putting the field in the same invalid state.
ExcludeCountries ICollection<BitCountry>? null The countries to leave out of the country dropdown and of the dialing-code lookup behind it.
FlagUrlSelector Func<BitCountry, string?>? null The url of the flag image of a country, replacing the flags that ship with the library. Returning null or an empty string leaves that country with the built-in flag.
FullWidth bool false Renders the phone input to fill 100% of its container width.
Immediate bool false Updates the number input value as the user types (based on the 'oninput' HTML event).
InputMode BitInputMode? null Sets the inputmode html attribute of the number input, which decides the on-screen keyboard it asks for.
Invalid bool false Renders the phone input in an invalid state without going through the validation of an EditContext.
IsOpen bool false Determines the opening state of the country dropdown callout. (two-way bound)
ItemTemplate RenderFragment<BitCountry>? null The custom template for each country of the dropdown list.
KeepNationalPrefix bool false Keeps the national (trunk) prefix - the 0 of "07911 123456" in the UK, the 1 in North America, the 8 in Russia - in the Value. By default it is dropped, so the Value is valid E.164 (+447911123456); the input keeps showing it either way. The significant leading 0 of Italy, San Marino, the Vatican, Côte d'Ivoire, the Republic of the Congo, Benin and Gabon is always kept.
Label string? null The label of the phone input shown above the field.
LabelTemplate RenderFragment? null The custom template for the label of the phone input.
Mask string? null The pattern the local number is formatted with as the user types, where every '#' is a digit slot and every other character is a literal inserted for them. The formatting is display only: the Value stays in the E.164 form.
MaskSelector Func<BitCountry?, string?>? null The pattern to format the local number with for a given country, taking precedence over Mask whenever it returns one.
MaxHeight int? null The maximum height of the country dropdown callout in pixels.
MaxLength int -1 Determines the maximum number of characters allowed in the number input.
NoBorder bool false Removes the border of the phone input.
NoDialCode bool false Hides the dialing code of the selected country in the country dropdown button.
NoDropdown bool false Removes the country dropdown, so the country of the phone input can only be set through its parameters: a number typed with the dialing code of another country is kept whole instead of moving it.
NoFlags bool false Hides the flag images of the countries in the dropdown button and in the dropdown list.
NoFocusOnSelect bool false Stops the focus from moving to the number input once a country has been picked.
NoResultsMessage string? null The message to show, and to announce to a screen reader, when the search result of the country dropdown is empty.
NoResultsTemplate RenderFragment? null The custom template to show when the search result of the country dropdown is empty.
NoSearchBox bool false Hides the search box of the country dropdown.
NoWrapNavigation bool false Stops the keyboard navigation of the country list from wrapping around at its two ends.
Number string? null The local phone number exactly as the input shows it, separators and all, without the country dialing code. (two-way bound)
OnBlur EventCallback<FocusEventArgs> The callback that is invoked when the number input loses focus.
OnClear EventCallback The callback that is invoked when the clear button of the number input is clicked.
OnClick EventCallback<MouseEventArgs> The callback that is invoked when the number input is clicked.
OnClose EventCallback The callback that is invoked when the country dropdown callout closes.
OnCountryChange EventCallback<BitCountry?> The callback that is invoked when the selected country changes.
OnEnter EventCallback<KeyboardEventArgs> The callback that is invoked when the Enter key is pressed in the number input.
OnEscape EventCallback<KeyboardEventArgs> The callback that is invoked when the Escape key is pressed in the number input.
OnFocus EventCallback<FocusEventArgs> The callback that is invoked when the number input receives focus.
OnFocusIn EventCallback<FocusEventArgs> The callback that is invoked when focus moves into the phone input.
OnFocusOut EventCallback<FocusEventArgs> The callback that is invoked when focus moves out of the phone input.
OnKeyDown EventCallback<KeyboardEventArgs> The callback that is invoked on every key press in the number input.
OnOpen EventCallback The callback that is invoked when the country dropdown callout opens.
OnSearch EventCallback<string?> The callback that is invoked when the search text of the country dropdown changes.
Placeholder string? null The placeholder text of the number input.
PreferredCountries ICollection<BitCountry>? null The countries to pin to the top of the country dropdown list. They also break the tie when a typed dialing code is shared by several countries.
Responsive bool false Shows the country dropdown as a full height panel on small screens instead of an inline callout.
ResponsiveCloseButtonAriaLabel string? null The aria-label of the close button of the responsive panel of the country dropdown.
ResponsiveCloseIcon BitIconInfo? null The icon of the close button of the responsive panel of the country dropdown. Takes precedence over ResponsiveCloseIconName when both are set.
ResponsiveCloseIconName string? null The icon name of the close button of the responsive panel of the country dropdown from the Fluent UI icon set.
SearchBoxAriaLabel string? null The aria-label for the search box of the country dropdown.
SearchBoxPlaceholder string? null The placeholder text of the search box of the country dropdown.
SearchResultsAnnouncement Func<int, string?>? null What a screen reader announces for the number of countries a search term leaves in the list, in place of the default "1 country found" / "{count} countries found". An empty result announces NoResultsMessage instead, and returning null keeps a count from being announced.
ShowClearButton bool false Shows a clear button in the number input while it holds a value.
Size BitSize? null The size of the phone input. An explicit value wins over the --bit-PhoneInput-* size variables (minimum height, font sizes, paddings, flag size, row height); left unset, the field is medium unless they say otherwise.
Strict bool false Discards every character typed or pasted into the number input that cannot be part of a phone number, so only digits (and an optional leading plus sign) survive.
Styles BitPhoneInputClassStyles? null Custom CSS styles for different parts of the BitPhoneInput.
ThrottleTime int 0 The throttle time in milliseconds for the number input (applied when Immediate is enabled).
Title string? null The tooltip (title attribute) of the phone input, written on the root and on the number input so it reaches a keyboard as well as a pointer.
Underlined bool false Renders the phone input with only a bottom border instead of a full one.

BitPhoneInput public members

Name Type Default value Description
FullNumber string? The full phone number in the E.164 form ("+[code][number]"), the same as the bound Value.
InputElement ElementReference The ElementReference to the number input of the BitPhoneInput.
OpenAsync Task Opens the country list. It does nothing while the field is disabled, read-only or has no dropdown.
CloseAsync Task Closes the country list.
SelectCountryAsync Task Selects the given country exactly as picking it in the list would, so the same events fire.
SetNumberAsync Task Sets the local number the way typing it would: it is laid out over the current pattern, and a number carrying an international prefix ('+' or '00') selects the country that owns its dialing code.
ClearAsync Task Clears the number, keeping the selected country, and raises OnClear when there was something to clear.
FocusAsync ValueTask Gives focus to the number input of the BitPhoneInput.

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.

BitComponentBase parameters

Name Type Default value Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
Disabled bool false Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
ForceAnimation bool false Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name.
Id string? null Gets or sets the unique identifier for the component's root element.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name Type Default value Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.

BitPhoneInputClassStyles properties

Name Type Default value Description
Root string? null Custom CSS classes/styles for the root element of the BitPhoneInput.
Label string? null Custom CSS classes/styles for the label of the BitPhoneInput.
FieldGroup string? null Custom CSS classes/styles for the field group (the container of the country dropdown and the number input) of the BitPhoneInput.
Dropdown string? null Custom CSS classes/styles for the country dropdown of the BitPhoneInput.
DropdownText string? null Custom CSS classes/styles for the selected country text (flag and dialing code) of the BitPhoneInput.
Caret string? null Custom CSS classes/styles for the caret down element of the country dropdown of the BitPhoneInput.
Flag string? null Custom CSS classes/styles for the flag image of the countries of the BitPhoneInput.
Input string? null Custom CSS classes/styles for the number input (text field) of the BitPhoneInput.
ClearButton string? null Custom CSS classes/styles for the clear button of the number input of the BitPhoneInput.
ClearButtonIcon string? null Custom CSS classes/styles for the icon of the clear button of the number input of the BitPhoneInput.
ErrorMessageContainer string? null Custom CSS classes/styles for the container of the error message of the BitPhoneInput.
ErrorMessage string? null Custom CSS classes/styles for the error message of the BitPhoneInput.
DescriptionContainer string? null Custom CSS classes/styles for the container of the description of the BitPhoneInput.
Description string? null Custom CSS classes/styles for the description of the BitPhoneInput.
Overlay string? null Custom CSS classes/styles for the overlay of the country dropdown of the BitPhoneInput.
Callout string? null Custom CSS classes/styles for the callout of the country dropdown of the BitPhoneInput.
SearchBox string? null Custom CSS classes/styles for the search box of the country dropdown of the BitPhoneInput.
ScrollContainer string? null Custom CSS classes/styles for the scroll container of the country dropdown of the BitPhoneInput.
List string? null Custom CSS classes/styles for the list (the listbox element) of the country dropdown of the BitPhoneInput.
Item string? null Custom CSS classes/styles for each item of the country dropdown of the BitPhoneInput.
ItemName string? null Custom CSS classes/styles for the name of each item in the country dropdown of the BitPhoneInput.
ItemCode string? null Custom CSS classes/styles for the dialing code of each item in the country dropdown of the BitPhoneInput.
NoResults string? null Custom CSS classes/styles for the no results message of the country dropdown of the BitPhoneInput.
ResponsiveLabelContainer string? null Custom CSS classes/styles for the label container of the responsive panel of the country dropdown of the BitPhoneInput.
ResponsiveLabel string? null Custom CSS classes/styles for the label of the responsive panel of the country dropdown of the BitPhoneInput.
ResponsiveCloseButton string? null Custom CSS classes/styles for the close button of the responsive panel of the country dropdown of the BitPhoneInput.
ResponsiveCloseIcon string? null Custom CSS classes/styles for the icon of the close button of the responsive panel of the country dropdown of the BitPhoneInput.

BitCountry properties

Represents the basic information of a specific country.

Name Type Default value Description
Name string The full name of the country.
Code string The dialing code of the country.
Iso2 string The ISO 3166-1 alpha-2 code of the country.
Iso3 string The ISO 3166-1 alpha-3 code of the country.
Priority int 0 The tie-breaking priority of the country among the ones that share its dialing code, where a higher number wins.
ExtraCodes string[]? null The other dialing codes the country answers to beyond Code (the Dominican Republic is reached on +1-809, +1-829 and +1-849 alike).
DigitsCode string The dialing code of the country reduced to its digits, as it appears in an E.164 number.
DigitsCodes string[] Every dialing code of the country - Code first, then ExtraCodes - reduced to the digits each of them carries in an E.164 number.

BitColor enum

Name Value Description
Primary 0 Primary general color.
Secondary 1 Secondary general color.
Tertiary 2 Tertiary general color.
Info 3 Info general color.
Success 4 Success general color.
Warning 5 Warning general color.
SevereWarning 6 SevereWarning general color.
Error 7 Error general color.
PrimaryBackground 8 Primary background color.
SecondaryBackground 9 Secondary background color.
TertiaryBackground 10 Tertiary background color.
PrimaryForeground 11 Primary foreground color.
SecondaryForeground 12 Secondary foreground color.
TertiaryForeground 13 Tertiary foreground color.
PrimaryBorder 14 Primary border color.
SecondaryBorder 15 Secondary border color.
TertiaryBorder 16 Tertiary border color.

BitColorKind enum

Name Value Description
Primary 0 The primary color kind.
Secondary 1 The secondary color kind.
Tertiary 2 The tertiary color kind.
Transparent 3 The transparent color kind.

BitDropDirection enum

Name Value Description
All 0 The direction determined automatically based on the available spaces in all directions.
TopAndBottom 1 The direction determined automatically based on the available spaces in only top and bottom directions.

BitInputMode enum

Name Value Description
None 0 No virtual keyboard. For when the page implements its own keyboard input control.
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.
Email 6 A virtual keyboard optimized for entering email addresses.
Url 7 A keypad optimized for entering URLs.

BitSize enum

Name Value Description
Small 0 The small size.
Medium 1 The medium size.
Large 2 The large size.

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.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.