#

Hero

#

#

Hero

#

#

#

SC Country Name & Flag List

SC Country Name & Flag List

SC Country Name & Flag List

Sep 1, 2025

0 views

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.

Get Component

Get Component

Get Component

Get Component

Preview

Preview

Preview

Preview

Lilac Flower
Lilac Flower
Lilac Flower
Lilac Flower

[MAIN]

{#main}

[MAIN]

{#main}

[MAIN]

{#main}

[MAIN]

{#main}

[OVRV]

Overview

[OVRV]

Overview

[OVRV]

Overview

[OVRV]

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
#
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
#
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

[DEPS]

Dependencies

[DEPS]

Dependencies

[DEPS]

Dependencies

[DEPS]

Dependencies

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

[CMPLX]

Complexity

[CMPLX]

Complexity

[CMPLX]

Complexity

[CMPLX]

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).
#
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).
#
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]

{#guide}

[GUIDE]

{#guide}

[GUIDE]

{#guide}

[GUIDE]

{#guide}

[STEP]

Instructions

[STEP]

Instructions

[STEP]

Instructions

[STEP]

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.

[EXMP]

Examples / Presets

[EXMP]

Examples / Presets

[EXMP]

Examples / Presets

[EXMP]

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

[MECH]

{#mechanics}

[MECH]

{#mechanics}

[MECH]

{#mechanics}

[MECH]

{#mechanics}

[HOW]

How it Works

[HOW]

How it Works

[HOW]

How it Works

[HOW]

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.

[PERF]

Performance & Tuning

[PERF]

Performance & Tuning

[PERF]

Performance & Tuning

[PERF]

Performance & Tuning

  • Images are small (~2–4 KB each).

  • Prefer “List” mode for controlled designs.

  • “Write” mode sensitive to exact matches (avoid typos).

[COMP]

Compatibility & Limits

[COMP]

Compatibility & Limits

[COMP]

Compatibility & Limits

[COMP]

Compatibility & Limits

  • Works in all modern browsers.

  • Dependent on CDN availability for flags.

  • No offline fallback; requires network.

[QUAL]

{#quality}

[QUAL]

{#quality}

[QUAL]

{#quality}

[QUAL]

{#quality}

[A11Y]

Accessibility

[A11Y]

Accessibility

[A11Y]

Accessibility

[A11Y]

Accessibility

  • Flags are <img> with alt text = "Country flag".

  • Labels inherit provided font and color for legibility.

  • Supports baseline offset for vertical optical alignment.

[SEC]

Security & Privacy

[SEC]

Security & Privacy

[SEC]

Security & Privacy

[SEC]

Security & Privacy

  • No network calls except image fetch from trusted CDN.

  • No data storage, eval, or innerHTML usage.

  • No device permissions required.

[REF]

{#reference}

[REF]

{#reference}

[REF]

{#reference}

[REF]

{#reference}

[API]

Props

[API]

Props

[API]

Props

[API]

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.

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

Name

Type

Default

Description

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

[NOTE]

Notes & Tips

[NOTE]

Notes & Tips

[NOTE]

Notes & Tips

[NOTE]

Notes & Tips

  • Flags are <img> with alt text = "Country flag".

  • Labels inherit provided font and color for legibility.

  • Supports baseline offset for vertical optical alignment.

[FAQ]

Troubleshooting / FAQ

[FAQ]

Troubleshooting / FAQ

[FAQ]

Troubleshooting / FAQ

[FAQ]

Troubleshooting / FAQ

  • No network calls except image fetch from trusted CDN.

  • No data storage, eval, or innerHTML usage.

  • No device permissions required.

[CRED]

{#credits-legal}

[CRED]

{#credits-legal}

[CRED]

{#credits-legal}

[CRED]

{#credits-legal}

[AUTH]

Credits

[AUTH]

Credits

[AUTH]

Credits

[AUTH]

Credits

  • Country data: ISO 3166-1 alpha-2.

  • Implementation & Framer adaptation by SecretoCho Design.

SecretoCho Design

Source Link

SecretoCho Design 2025

[LEGAL]

Disclaimer

[LEGAL]

Disclaimer

[LEGAL]

Disclaimer

[LEGAL]

Disclaimer

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

SC Corner Lines

SC Corner Lines

SC Corner Lines

SC Corner Lines

SC CSS Pattern

SC CSS Pattern

SC CSS Pattern

SC CSS Pattern

Stay ahead of the curve with insights into emerging visualization trends and technologies.

SUBSCRIBE

SUBSCRIBE

SUBSCRIBE

SUBSCRIBE

About

Book a Call

Book a Call

Book a Call