> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Ip

One IP address and what is known about it — the country it resolves to, the port, the provider owning the range — composed as a row in which the address is the identity and everything else is context. `IpList` collapses a set of them: vertical keeps the first and hides the rest behind a `+N addresses` link, horizontal fits as many as the width allows and puts the remainder in a `+N` badge.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Ip) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/data-display-ip--overview)

```tsx
import { Ip, IpAddress, IpCountry, IpPort, IpProvider } from '@wallarm-org/design-system/Ip';

export const Basic = () => (
  <div className='grid grid-cols-[auto_200px] items-center gap-x-12 gap-y-8'>
    <Ip>
      <IpAddress>8.8.8.8</IpAddress>
    </Ip>
    <Ip>
      <IpCountry code='US' />
      <IpAddress>1.1.1.1</IpAddress>
    </Ip>
    <Ip>
      <IpCountry code='DE' />
      <IpAddress>77.88.8.8</IpAddress>
      <IpPort>:8080</IpPort>
    </Ip>
    <Ip>
      <IpCountry code='NL' />
      <IpAddress>20.33.0.0</IpAddress>
      <IpProvider>Azure</IpProvider>
    </Ip>
    <Ip>
      <IpCountry code='JP' />
      <IpAddress>2001:0db8:85a3:0000:0000:8a2e:0370:7334</IpAddress>
      <IpProvider>GCP</IpProvider>
    </Ip>
  </div>
);
```

## Usage

```tsx
import { Ip, IpAddress, IpCountry, IpPort, IpProvider } from '@wallarm-org/design-system/Ip';
```

## Examples

### Horizontal multiple

Eight addresses in a 600px row: the ones that fit are separated by a middle dot, and the
rest fold into a `+N` badge that opens the full set in a popover.

```tsx
import { Ip, IpAddress, IpCountry, IpList, IpProvider } from '@wallarm-org/design-system/Ip';

export const HorizontalMultiple = () => (
  <div style={{ width: 600 }}>
    <IpList type='horizontal' data-testid='horizontal-ips'>
      <Ip>
        <IpCountry code='ES' />
        <IpAddress>142.198.167.52</IpAddress>
        <IpProvider>Azure</IpProvider>
      </Ip>
      <Ip>
        <IpCountry code='US' />
        <IpAddress>34.74.73.20</IpAddress>
        <IpProvider>AWS</IpProvider>
      </Ip>
      <Ip>
        <IpCountry code='MY' />
        <IpAddress>34.74.73.21</IpAddress>
        <IpProvider>GCP</IpProvider>
      </Ip>
      <Ip>
        <IpCountry code='US' />
        <IpAddress>34.74.73.22</IpAddress>
        <IpProvider>AWS</IpProvider>
      </Ip>
      <Ip>
        <IpCountry code='MY' />
        <IpAddress>34.74.73.23</IpAddress>
        <IpProvider>GCP</IpProvider>
      </Ip>
      <Ip>
        <IpCountry code='DE' />
        <IpAddress>77.88.8.8</IpAddress>
      </Ip>
      <Ip>
        <IpCountry code='NL' />
        <IpAddress>20.33.0.0</IpAddress>
      </Ip>
      <Ip>
        <IpCountry code='JP' />
        <IpAddress>192.168.1.1</IpAddress>
      </Ip>
    </IpList>
  </div>
);
```

### Vertical multiple

Three vertical lists, each showing its first address only and holding the rest behind a
`+N addresses` link — the link indents to the address when the row opens with a flag.

```tsx
import { Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider } from '@wallarm-org/design-system/Ip';
import { VStack } from '@wallarm-org/design-system/Stack';

export const VerticalMultiple = () => (
  <VStack gap={12}>
    <IpList>
      <Ip>
        <IpCountry code='US' />
        <IpAddress>8.8.8.8</IpAddress>
      </Ip>
      <Ip>
        <IpCountry code='AU' />
        <IpAddress>1.1.1.1</IpAddress>
      </Ip>
      <Ip>
        <IpCountry code='DE' />
        <IpAddress>77.88.8.8</IpAddress>
      </Ip>
    </IpList>
    <IpList>
      <Ip data-testid='ip'>
        <IpCountry code='NL' />
        <IpAddress>52.94.76.0</IpAddress>
      </Ip>
      <Ip data-testid='ip'>
        <IpCountry code='NL' />
        <IpAddress>20.33.0.0</IpAddress>
      </Ip>
      <Ip data-testid='ip'>
        <IpCountry code='AZ' />
        <IpAddress>35.190.0.0</IpAddress>
        <IpProvider>GCP</IpProvider>
      </Ip>
      <Ip data-testid='ip'>
        <IpCountry code='US' />
        <IpAddress>169.55.0.0</IpAddress>
        <IpProvider>IBM Cloud</IpProvider>
      </Ip>
      <Ip data-testid='ip'>
        <IpAddress>88.198.0.0</IpAddress>
        <IpPort>:8080</IpPort>
      </Ip>
    </IpList>
    <IpList>
      <Ip>
        <IpAddress>10.0.0.1</IpAddress>
        <IpPort>:8080</IpPort>
        <IpProvider>Tor</IpProvider>
      </Ip>
      <Ip>
        <IpAddress>10.0.0.2</IpAddress>
        <IpPort>:443</IpPort>
        <IpProvider>VPN</IpProvider>
      </Ip>
    </IpList>
  </VStack>
);
```

## Props

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| asChild        | `boolean \| undefined`                               | `false` |             |
| data-testid    | `string \| undefined`                                |         |             |

### IpCountry

| Prop    | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default | Description |
| ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------- |
| code \* | `"AF" \| "AX" \| "AL" \| "DZ" \| "AS" \| "AD" \| "AO" \| "AI" \| "AG" \| "AR" \| "AM" \| "AW" \| "AU" \| "AT" \| "AZ" \| "BS" \| "BH" \| "BD" \| "BB" \| "BY" \| "BE" \| "BZ" \| "BJ" \| "BM" \| "BT" \| "BO" \| "BQ" \| "BA" \| "BW" \| "BV" \| "BR" \| "IO" \| "BN" \| "BG" \| "BF" \| "BI" \| "CV" \| "KH" \| "CM" \| "CA" \| "KY" \| "CF" \| "TD" \| "CL" \| "CN" \| "CX" \| "CC" \| "CO" \| "KM" \| "CG" \| "CD" \| "CK" \| "CR" \| "CI" \| "HR" \| "CU" \| "CW" \| "CY" \| "CZ" \| "DK" \| "DJ" \| "DM" \| "DO" \| "DNO" \| "EC" \| "EG" \| "SV" \| "GQ" \| "ER" \| "EE" \| "ET" \| "FK" \| "FO" \| "FJ" \| "FI" \| "FR" \| "GF" \| "PF" \| "TF" \| "GA" \| "GM" \| "GE" \| "DE" \| "GH" \| "GI" \| "GR" \| "GL" \| "GD" \| "GP" \| "GU" \| "GT" \| "GG" \| "GN" \| "GW" \| "GY" \| "HT" \| "HM" \| "VA" \| "HN" \| "HK" \| "HU" \| "IS" \| "IN" \| "ID" \| "IR" \| "IQ" \| "IE" \| "IM" \| "IL" \| "IT" \| "JM" \| "JP" \| "JE" \| "JO" \| "KZ" \| "KE" \| "KI" \| "KP" \| "KR" \| "KW" \| "KG" \| "LA" \| "LV" \| "LB" \| "LS" \| "LR" \| "LY" \| "LI" \| "LT" \| "LHO" \| "LU" \| "MO" \| "MK" \| "MG" \| "MW" \| "MY" \| "MV" \| "ML" \| "MT" \| "MH" \| "MQ" \| "MR" \| "MU" \| "YT" \| "MX" \| "FM" \| "MD" \| "MC" \| "MN" \| "ME" \| "MS" \| "MA" \| "MZ" \| "MM" \| "NA" \| "NR" \| "NP" \| "NL" \| "NC" \| "NZ" \| "NI" \| "NE" \| "NG" \| "NU" \| "NF" \| "MP" \| "NO" \| "OM" \| "PK" \| "PW" \| "PS" \| "PA" \| "PG" \| "PY" \| "PE" \| "PH" \| "PN" \| "PL" \| "PT" \| "PR" \| "QA" \| "ROC" \| "RE" \| "RO" \| "RU" \| "RW" \| "BL" \| "SH" \| "KN" \| "LC" \| "MF" \| "PM" \| "VC" \| "WS" \| "SM" \| "ST" \| "SA" \| "SN" \| "RS" \| "SC" \| "SL" \| "SG" \| "SX" \| "SK" \| "SI" \| "SB" \| "SO" \| "ZA" \| "GS" \| "SS" \| "ES" \| "LK" \| "SD" \| "SR" \| "SJ" \| "SZ" \| "SE" \| "CH" \| "SY" \| "TW" \| "TJ" \| "TZ" \| "TH" \| "TL" \| "TG" \| "TK" \| "TO" \| "TT" \| "TN" \| "TR" \| "TM" \| "TC" \| "TV" \| "UG" \| "UA" \| "AE" \| "GB" \| "US" \| "UY" \| "UZ" \| "VU" \| "VE" \| "VN" \| "VG" \| "VI" \| "WF" \| "EH" \| "YE" \| "ZM" \| "ZW"` |         |             |

### IpList

| Prop           | Type                                                 | Default    | Description |
| -------------- | ---------------------------------------------------- | ---------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |            |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |            |             |
| autoFocus      | `boolean \| undefined`                               |            |             |
| id             | `string \| undefined`                                |            |             |
| tabIndex       | `number \| undefined`                                |            |             |
| title          | `string \| undefined`                                |            |             |
| rel            | `string \| undefined`                                |            |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |            |             |
| type           | `"vertical" \| undefined`                            | `vertical` |             |
| asChild        | `boolean \| undefined`                               |            |             |
| data-testid    | `string \| undefined`                                |            |             |

### IpProvider

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| title          | `string \| undefined`                                |         |             |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| asChild        | `boolean \| undefined`                               |         |             |
| muted          | `{ true: string; false: string; }`                   |         |             |
| data-testid    | `string \| undefined`                                |         |             |
| variant        | `{ default: string; dotted: string; }`               |         |             |
| isIconOnly     | `{ true: string; }`                                  |         |             |
| textVariant    | `{ default: string; code: string; }`                 |         |             |
| isClickable    | `{ true: string; }`                                  |         |             |