PhoneInput
BitPhoneInput is an input component for entering phone numbers with a searchable country selector that shows the flag and the dialing code of each country.
Notes
To use this component, you need to install the
Bit.BlazorUI.Extras
nuget package, as described in the Optional steps of the
Getting started page.
Usage
Basic
The basic usage of the BitPhoneInput with a default country.
Binding
Two-way bind both the phone number and the selected country.
Number:
Country:
Full number: +
Label
Show a label above the field using the Label parameter.
NoSearchBox
Hide the search box of the country dropdown using the NoSearchBox parameter.
Custom countries
Limit the available countries by providing a custom list to the Countries parameter.
FullWidth
Make the phone input fill 100% of its container width using the FullWidth parameter.
Disabled & ReadOnly
Disabled:
ReadOnly:
Events
Use the OnCountryChange callback to react to the selected country changes.
Selected country:
Style & Class
Customize the appearance of the BitPhoneInput using Style, Class, Styles, and Classes.
RTL
Use BitPhoneInput in right-to-left (RTL).
API
BitPhoneInput parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Classes | BitPhoneInputClassStyles? | null | Custom CSS classes for different parts of the BitPhoneInput. |
| Color | BitColor? | null | The general color of the phone input. |
| 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) |
| DefaultCountry | BitCountry? | null | The default selected country to be initially used when the Country parameter is not set. |
| DropDirection | BitDropDirection | BitDropDirection.TopAndBottom | Determines the allowed drop directions of the country dropdown callout. |
| DropdownPlaceholder | string? | null | The placeholder text of the country dropdown when no country is selected. |
| 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). |
| 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. |
| MaxLength | int | -1 | Determines the maximum number of characters allowed in the number input. |
| NoResultsMessage | string? | null | The message to show when the search result of the country dropdown is empty. |
| NoSearchBox | bool | false | Hides the search box of the country dropdown. |
| OnCountryChange | EventCallback<BitCountry?> | The callback that is invoked when the selected country changes. | |
| Placeholder | string? | null | The placeholder text of the number input. |
| SearchBoxPlaceholder | string? | null | The placeholder text of the search box of the country dropdown. |
| SearchBoxAriaLabel | string? | null | The aria-label for the search box of the country dropdown. |
| Styles | BitPhoneInputClassStyles? | null | Custom CSS styles for different parts of the BitPhoneInput. |
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. |
| 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. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | bool | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| 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. |
| 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. |
| DropdownText | string? | null | Custom CSS classes/styles for the selected country text (flag and dialing code) 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. |
| Input | string? | null | Custom CSS classes/styles for the number input (text field) 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. |
BitColor enum
Name |
Value |
Description |
|---|---|---|
| Primary | 0 | |
| Secondary | 1 | |
| Tertiary | 2 | |
| Info | 3 | |
| Success | 4 | |
| Warning | 5 | |
| SevereWarning | 6 | |
| Error | 7 |
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
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
Or you can review / edit this component on GitHub.
- On this page