# CountryPicker

Enables users to select a country from a dropdown list with various styling options.

### **Import**
  ```tsx
  import { CountryPicker } from '@app-studio/web';
  ```

### **Default**
```tsx
import React from 'react';
import { CountryPicker } from '@app-studio/web';

export const DefaultCountryPicker = () => <CountryPicker label="Country" />;

```

### **error**
Optional error flag to indicate validation state

```tsx
import React from 'react';
import { CountryPicker } from '@app-studio/web';

export const ErrorCountryPicker = () => (
  <CountryPicker id="error" label="Country" error />
);

```

### **helperText**
Optional helper text for guiding the user

```tsx
import React from 'react';

import { CountryPicker } from '@app-studio/web';

export const HelperTextCountryPicker = () => (
  <CountryPicker helperText="CountryPicker one item!" error />
);

```

## Props

| Prop        | Type          | Description                                                              | Default |
| ----------- | ------------- | ------------------------------------------------------------------------ | ------- |
| label       | string        | The label text for the country picker.                                  |         |
| error       | boolean       | Flag to indicate validation state.                                       | false   |
| helperText  | string        | Helper text for guiding the user.                                        |         |
| shape       | Shape         | Shape of the CountryPicker for visual views.                            |         |
| variant     | Variant       | Variant for different visual types of CountryPicker.                     |         |
| shadow      | Shadow/Elevation | Shadow or Elevation styles for visual depth and perspective.            |         |
| styles      | CSSProperties | Optional custom styles for the CountryPicker (container, input, label). |         |
| className   | string        | Optional className for the CountryPicker container.                      |         |
| placeholder | string        | Placeholder text when no country is selected.                           |         |

### **shape**
Optional shape of the CountryPicker for visual styles

```tsx
import React from 'react';
import { CountryPicker } from '@app-studio/web';

import { Vertical } from '@app-studio/web';

import { Shape } from '@app-studio/web';

export const ShapeCountryPicker = () => (
  <Vertical gap={10}>
    {['default', 'sharp', 'rounded', 'pillShaped'].map((shape) => (
      <CountryPicker
        key={shape}
        label={shape}
        shape={shape as Shape}
        placeholder="Select a country..."
      />
    ))}
  </Vertical>
);

```

### **variant**
Variant for different visual types of CountryPicker

```tsx
import React from 'react';
import { CountryPicker } from '@app-studio/web';

import { Vertical } from '@app-studio/web';

import { Variant } from '@app-studio/web';

export const VariantCountryPicker = () => (
  <Vertical gap={10}>
    {['outline', 'default', 'none'].map((variant) => (
      <CountryPicker
        key={variant}
        variant={variant as Variant}
        label={variant}
        placeholder="Select a country..."
      />
    ))}
  </Vertical>
);

```

### **shadow**
Shadow or Elevation styles for visual depth and perspective

```tsx
import React from 'react';
import { CountryPicker } from '@app-studio/web';

export const ShadowCountryPicker = () => (
  <CountryPicker shadow={{ boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px' }} />
);

```