<!-- AUTO-GENERATED by packages/components/bin/generate-skill-component-catalog.js. Do not edit by hand. -->

# r-input-phone-number

A phone number input with integrated country code prefix selection and built-in phone number validation.

Example
```
<r-input-phone-number name="phone" label="Phone number" placeholder="Enter phone number"></r-input-phone-number>
```

## class: `RInputPhoneNumber`, `r-input-phone-number`

### Fields

| Name                        | Privacy | Type      | Default                               | Description                                                                                                                                                                                                              | Inherited From |
| --------------------------- | ------- | --------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
| `countryCodeLabel`          |         | `string`  | `'Country code'`                      | Label for countryCode code                                                                                                                                                                                               |                |
| `countryCodeMissingMessage` |         | `string`  |                                       | Custom error message displayed when no country code is selected.                                                                                                                                                         |                |
| `customErrorMessage`        |         | `string`  |                                       | Set custom message for `customError` property of a ValidityState object indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setCustomValidity() method. |                |
| `disabled`                  |         | `boolean` |                                       | Prevents user interaction and applies disabled style.                                                                                                                                                                    |                |
| `error`                     |         | `string`  |                                       | Custom validation error message                                                                                                                                                                                          |                |
| `fieldIndicator`            |         | `string`  |                                       | An optional field indicator for the label.                                                                                                                                                                               |                |
| `form`                      |         | `string`  |                                       | Specifies the `id` of the `<form>` to which the element belongs                                                                                                                                                          |                |
| `fullWidth`                 |         | `boolean` |                                       | Defines if the component suppose to occupy 100% width                                                                                                                                                                    |                |
| `hint`                      |         | `string`  |                                       | Optional hint giving additional context to the user                                                                                                                                                                      |                |
| `inputLabel`                |         | `string`  | `'Phone number without country code'` | Label for phone input                                                                                                                                                                                                    |                |
| `invalid`                   |         | `boolean` |                                       | Validity indicator, serving to change UI of the component                                                                                                                                                                |                |
| `invalidPhoneNumberMessage` |         | `string`  |                                       | Custom error message displayed when phone number is not valid.                                                                                                                                                           |                |
| `label`                     |         | `string`  |                                       | The label for the phone number.                                                                                                                                                                                          |                |
| `name`                      |         | `string`  | `'phone-number'`                      | Specifies a name for an input for submitting within formData object.                                                                                                                                                     |                |
| `novalidate`                |         | `boolean` |                                       | Specifies if element must be ignored during validation of the form elements                                                                                                                                              |                |
| `pattern`                   |         | `string`  | `DEFAULT_PHONE_NUMBER_PATTERN`        | A regular expression pattern the local phone number part must match before<br>the phone library validation runs. Defaults to digits, spaces, parentheses,<br>and hyphens: `^[\d\s()\\-]+$`.                            |                |
| `readonly`                  |         | `boolean` |                                       | Makes the date inputs read-only: users can focus and copy the value,<br>but cannot modify it (value still submitted with the form unlike disabled).                                                                     |                |
| `required`                  |         | `boolean` |                                       | Specifies that phone number value is required                                                                                                                                                                            |                |
| `submitOnEnter`             |         | `boolean` | `true`                                | Controls whether pressing Enter triggers implicit form submission when this input is inside a form.<br>Set to `false` for custom Enter behavior without submitting the form.                                            |                |
| `valid`                     |         | `boolean` |                                       | Visual indication of valid state                                                                                                                                                                                         |                |
| `value`                     |         | `string`  |                                       | Phone number value                                                                                                                                                                                                       |                |
| `valueMissingMessage`       |         | `string`  |                                       | Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API                                                                                             |                |

### Methods

| Name                | Privacy | Description                                                                                           | Parameters        | Return             | Inherited From |
| ------------------- | ------- | ----------------------------------------------------------------------------------------------------- | ----------------- | ------------------ | -------------- |
| `checkValidity`     |         | Validates the input phone number without triggering UI and returns a boolean indicating its validity. |                   | `Promise<boolean>` |                |
| `getValue`          |         | Returns the element value.                                                                            |                   | `Promise<string>`  |                |
| `reportValidity`    |         | Check validity and reveal validation state.                                                           |                   | `Promise<boolean>` |                |
| `reset`             |         | Reset phone number input to its initial state                                                         |                   | `Promise<void>`    |                |
| `setCustomValidity` |         | Validates an element, displays provided message in case value is invalid.                             | `message: string` | `Promise<void>`    |                |
| `setValue`          |         | Set the element value.                                                                                | `value: string`   | `Promise<void>`    |                |

### Events

| Name        | Type                                                                                                               | Description                                                        | Inherited From |
| ----------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------ | -------------- |
| `rChange`   | `CustomEvent<{ element: HTMLRInputPhoneNumberElement; value: string; countryCode: string; phoneNumber: string; }>` | Emits 'rChange' event when value of the component has been changed |                |
| `rInput`    | `CustomEvent<{ element: HTMLRInputPhoneNumberElement; value: string; phoneNumber: string; countryCode: string; }>` | Emits 'rInput' event when value of the component is changing       |                |
| `rReset`    | `CustomEvent<{ element: HTMLRInputPhoneNumberElement; value: string; }>`                                           | Emits 'rReset' event when form containing the component was reset  |                |
| `rValidate` | `CustomEvent<{ state: string; message: string; }>`                                                                 | Emits event after each validation                                  |                |

### Attributes

| Name                           | Field                     | Inherited From |
| ------------------------------ | ------------------------- | -------------- |
| `country-code-label`           | countryCodeLabel          |                |
| `country-code-missing-message` | countryCodeMissingMessage |                |
| `custom-error-message`         | customErrorMessage        |                |
| `disabled`                     | disabled                  |                |
| `error`                        | error                     |                |
| `field-indicator`              | fieldIndicator            |                |
| `form`                         | form                      |                |
| `full-width`                   | fullWidth                 |                |
| `hint`                         | hint                      |                |
| `input-label`                  | inputLabel                |                |
| `invalid`                      | invalid                   |                |
| `invalid-phone-number-message` | invalidPhoneNumberMessage |                |
| `label`                        | label                     |                |
| `name`                         | name                      |                |
| `novalidate`                   | novalidate                |                |
| `pattern`                      | pattern                   |                |
| `readonly`                     | readonly                  |                |
| `required`                     | required                  |                |
| `submit-on-enter`              | submitOnEnter             |                |
| `valid`                        | valid                     |                |
| `value`                        | value                     |                |
| `value-missing-message`        | valueMissingMessage       |                |

### Slots

| Name      | Description                                |
| --------- | ------------------------------------------ |
|           | Country code prefix content                |
| `popover` | Popover element attached to the label area |

<hr/>

## Exports

| Kind                        | Name                   | Declaration       | Module | Package |
| --------------------------- | ---------------------- | ----------------- | ------ | ------- |
| `js`                        | `RInputPhoneNumber`    | RInputPhoneNumber |        |         |
| `custom-element-definition` | `r-input-phone-number` | RInputPhoneNumber |        |         |