---
title: SC Country Name & Flag List
description: Any country’s flag and name, with layout, typography and alignment options.
url: https://secretocho.design/lab/sc-country-name-flag-list/
type: SoftwareSourceCode
status: working
published: 2025-09-01
updated: 2025-09-01
---

# SC Country Name & Flag List

> Any country’s flag and name, with layout, typography and alignment options.

component 08 / 28 · WORKING

- **type**: Code Component
- **platform**: Framer
- **last update**: 2025-09-01
- **license**: SecretoCho Design

![A still of the SC Country Name & Flag List demo, as its module draws it with reduced motion.](https://secretocho.design/_astro/still.Bye82Uos_Z28aVGq.webp)

*fig 00 · live demo, ported from **SC\_Country\_Flag\_List.tsx***

Show any country flag and name with responsive layout, typography, and alignment options.

A flexible component for rendering country flags (via ISO 3166-1 alpha-2 codes) with optional names or codes. Supports both dropdown selection and direct text input for seamless integration with static designs and CMS data pipelines.

- UI
- Metadata
- Internationalization

## Main

### Overview

- **Built With**: React, CSS (inline styles), Framer Code Component API
- **Layout Support**: Responsive with min-width guardrails
- **Orientation**: Horizontal (flag + label, configurable side)
- **Ideal Use Case**: Profile cards, checkout flows, location selectors

### Tags

- country
- flag
- iso
- internationalization
- ui

### Code comment

*SC\_Country\_Flag\_List.tsx · lines 3–8 · the file’s header comment*

```tsx
/**
 * SC Country Name & Flag List
 * © SecretoCho Design 2025 (https://secretocho.design)
 * Render ISO 3166-1 alpha-2 flags with names or codes.
 * Selection via dropdown (List) or text input (Write).
 */
```

### Dependencies

- **Technologies**: None (flags served via flagcdn.com)
- **Notes**: No external libraries; pure React + CSS.

### Complexity

- **Logic Level**: Medium (string parsing, ISO mapping, conditional rendering)
- **Runtime Cost**: Low (static list, single image load)
- **Component Size**: ~24 KB (due to bundled country list)
- **Notes**: Ensure stable internet to fetch flags (CDN).

## Guide

### Instructions

1. Add to your Framer project and place on the canvas.
2. Choose **Select → List** (dropdown) or **Select → Write** (string input).
3. Configure **Country** (if List) or **Search** (if Write).
4. Adjust typography, alignment, spacing, and radius.
5. Use label toggles to display name, code, or hide entirely.

### Examples / Presets

- Preset A
  
  List → TR, Name → “Turkey”, Right position, Flag 24×18, Radius 4px
  
- Preset B
  
  Write → "JP", Display → Code, Alignment → Center
  
- Preset C
  
  List → US, Name hidden, Flag 40×30, Alignment → Right
  

## Mechanics

### How it Works

- Internal countryList holds { code, name } pairs (ISO 3166-1).
- **List Mode:** Direct lookup by enum prop.
- **Write Mode:** Lowercased input string matched against name/code.
- Flag image loaded from https://flagcdn.com/w40/{code}.png.
- Flexbox handles alignment, spacing, and label placement.

### Performance & Tuning

- Images are small (~2–4 KB each).
- Prefer “List” mode for controlled designs.
- “Write” mode sensitive to exact matches (avoid typos).

### Compatibility & Limits

- Works in all modern browsers.
- Dependent on CDN availability for flags.
- No offline fallback; requires network.

## Quality

### Accessibility

- Flags are \<img\> with alt text = "Country flag".
- Labels inherit provided font and color for legibility.
- Supports baseline offset for vertical optical alignment.

### Security & Privacy

- No network calls except image fetch from trusted CDN.
- No data storage, eval, or innerHTML usage.
- No device permissions required.

## Reference

### Props

| name | type | default | description |
| --- | --- | --- | --- |
| selectMode | enum(“List”\|“Write”) | “List” | Selection method. |
| country | enum(ISO alpha-2) | “TR” | Country code (when List). |
| search | string | - | Exact country name or code (when Write). |
| showName | boolean | true | Toggle label visibility. |
| nameFormat | enum(“name”\|“code”) | “name” | Display country name or ISO code. |
| namePosition | enum(“left”\|“right”) | “right” | Label placement. |
| fontType | font | - | Typography settings for label. |
| textColor | color | ”#000” | Label text color. |
| nameOffset | number(px) | 0 | Vertical shift for label. |
| spacing | number(px) | 8 | Gap between flag and label. |
| alignment | enum(“left”\|“center”\|“right”) | “left” | Horizontal alignment. |
| FlagWidth | number(px) | 24 | Flag image width. |
| FlagHeight | number(px) | 18 | Flag image height. |
| flagRadius | number(px) | 4 | Rounded corners for flag. |

### Notes & Tips

- Use Write mode for CMS pipelines (dynamic data).
- “List” mode guarantees valid ISO selection.
- Radius \> 8px gives a “badge” look.

### Troubleshooting / FAQ

Flag not showing

Check code is valid ISO alpha-2.

Name not aligned

Adjust nameOffset.

Image blurry

Increase FlagWidth/FlagHeight.

## Source

### Header comment

*SC\_Country\_Flag\_List.tsx · lines 3–8 · header comment*

```tsx
/**
 * SC Country Name & Flag List
 * © SecretoCho Design 2025 (https://secretocho.design)
 * Render ISO 3166-1 alpha-2 flags with names or codes.
 * Selection via dropdown (List) or text input (Write).
 */
```

[props \[REF\]](#reference)

### Key excerpt

One flag image URL per ISO code, and two ways to pick a country: a code from the list, or typed text matched against names and codes.

*SC\_Country\_Flag\_List.tsx · lines 211–249 · tsx*

```tsx
function getFlagImageUrl(code: string) {
    return `https://flagcdn.com/w40/${code.toLowerCase()}.png`
}
/**
 * @framerDisableUnlink
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
export function SCCountryFlagList(props) {
    const {
        selectMode,
        country,
        search,
        alignment,
        FlagHeight,
        FlagWidth,
        fontType,
        textColor,
        nameOffset,
        spacing,
        showName,
        namePosition,
        nameFormat,
        flagRadius,
    } = props

    let selected = { name: "Turkey", code: "TR" }

    if (selectMode === "List") {
        selected = countryList.find((c) => c.code === country) || selected
    } else if (selectMode === "Write" && search) {
        const input = search.trim().toLowerCase()
        selected =
            countryList.find(
                (c) =>
                    c.name.toLowerCase() === input ||
                    c.code.toLowerCase() === input
            ) || selected
    }
```

## Credits

### Credits

- Country data: ISO 3166-1 alpha-2.
- Implementation & Framer adaptation by SecretoCho Design.

- **inspired by**: SecretoCho Design
- **license**: SecretoCho Design

SecretoCho Design 2025

### Disclaimer

Provided “as is” for visual/UX purposes. Validate performance, accessibility, and licensing for your project.

## Proves

- [Creative coding](https://secretocho.design/about/#capabilities)

## Hiring a design engineer?

I’m open to senior design engineer roles: remote from Belgrade, or relocation with visa sponsorship. Write to me, or read the CV first. Client work stays selective, one project at a time.

[sc@secretocho.design](mailto:sc@secretocho.design)

[read the CV](https://secretocho.design/cv/) · [LinkedIn](https://www.linkedin.com/in/secretocho/)