# PhoneCountryCode — SvelteKit UI

Package: sveltekit-ui 1.1.87

Page: https://www.sveltekit-ui.com/components/phone_country_code

Category: Input controls

Selects a numeric international country calling code from the library's country list.

Public component import: `PhoneCountryCode`

Public manager import: `create_phone_country_code_manager`

## Component notes

- builder_aliases:
  - create_country_code_manager
- notes:
  - Several countries share calling codes, so the value alone does not uniquely identify a country. The built-in list is static; verify jurisdiction-specific dialing rules in your application's phone validation.

## Usage

```svelte
<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { PhoneCountryCode, create_phone_country_code_manager } from "sveltekit-ui"

  let chosen_code = $state(1)

  const manager = create_phone_country_code_manager({
    val: 1,
    on_change: (value) => { chosen_code = value },
  })
</script>

<PhoneCountryCode {manager} />
<p>Country calling code: +{chosen_code}</p>
```

## Configuration

### `val`

- type: number
- default: 1
- description: Numeric calling code without the leading +, such as 1 or 44. The selected value is a phone_code, not an ISO country code.

### `on_change`

- type: function
- description: Called with the selected numeric calling code when a country row is chosen.

## Methods

### `set_val()`

- parameters:
  - input: number
- returns: void
- description: Set the selected calling code through the child Dropdown manager.

## Returned state

### `val`

- type: number
- description: Selected calling code.

### `dropdown_manager`

- type: object
- description: Country selector Dropdown manager; rows include code, emoji, phone_code, and name.