CountryPicker

API reference and demos for CountryPicker.

Source

Import

import { CountryPicker } from "@flanksource/clicky-ui/components";

Demos

Default · Open in Storybook

Preselected · Open in Storybook

Required · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
ariaLabel	string	Country	Accessible name for the input. Use when `label` is a non-string node (e.g. an icon) so the control still has a text name for screen readers; defaults to `label` when it is a string.
ariaRequired	boolean	—	Sets aria-required on the input. Separate from `required`, which governs whether the value can be cleared; a consumer announcing a mandatory field to assistive technology need not also remove the clear button.
className	string	—	Classes applied to the root wrapper.
describedBy	string	—	Id of the element describing the control (typically its validation message), wired through as aria-describedby.
disabled	boolean	—	Disables the input.
footer	ReactNode	—	Non-interactive content pinned below the option rows.
id	string	—	HTML id for the input element.
invalid	boolean	false	Marks the control as invalid: renders a destructive border and sets aria-invalid. Purely presentational — the consumer decides what invalid means (e.g. a value absent from the options in a strict picker).
label	ReactNode	—	Optional label rendered inline inside the control, before the input.
menuWidth	number	—	Preferred popup width in pixels, constrained to the viewport. The control keeps its own width.
onChange*	(…) => void	—	—
onKeyDown	(…) => void	—	Called when a key is pressed in the input.
placeholder	string	Search country or code…	Ghost text when no value is set.
required	boolean	—	When true, the value cannot be cleared (the clear button is hidden).
searchPlacement	enum	—	Places the filter in the popup and uses a button for the closed control. Custom entries appear only when no options match; dismissal discards the search.
size	enum	—	Overrides the input's height/padding/text size with an explicit size token (xs–xl). When unset, the input uses the global density tokens.
suffix	ReactNode	—	Trailing in-field adornment, rendered left of the clear/chevron controls.
title	string	—	Tooltip for the menu filter button.
triggerClassName	string	—	Button classes for the menu filter layout.
triggerContent	ReactNode	—	Replaces the closed caption when searchPlacement is menu.
value*	string	—	—