Loading component…
Loading component…
What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.
React
Package maturity: stable · Implementation verification: Beta
This platform’s whole catalogue is verified to React beta. The catalogue figure is the weakest component on that platform, not an average.
npx @kinetixui/cli add country-selectnpm i @kinetixui/ui @kinetixui/tokens@kinetixui/ui on npm@kinetixui/tokens on npmThe CLI copies React source. Usage imports from @kinetixui/ui require the npm package; for copied source, use your configured local import instead.
Not implemented yet · data display wave.
Composition · KinetixUI ships no SwiftUI component for this.
Composition · KinetixUI ships no Jetpack Compose component for this.
Composition · KinetixUI ships no Flutter component for this.
Choose a country by typing its name, code or a keyword: the combobox recipe with a country data adapter, and the country list supplied by the product.
Reduced motion: off · your browser setting
npx @kinetixui/cli add country-selectimport { CountrySelect } from "@kinetixui/ui";
<CountrySelect
label="Country"
countries={[
{ code: "SA", name: "Saudi Arabia", keywords: ["KSA", "السعودية"] },
{ code: "AE", name: "United Arab Emirates", keywords: ["UAE"] },
]}
value={country}
onValueChange={setCountry}
name="country"
/>CountrySelect is the combobox recipe with a country data adapter. It ships no country
list: you pass the countries you serve, with names in the reader's language (for example from
Intl.DisplayNames), so nothing is bundled that you cannot localise or trim.
keywords you add (alternative names, local spellings).showCode shows the ISO code beside each name. adornment can hold a flag, but a flag is never the only
identifier: the name is always shown and always spoken.name renders a hidden input so the value posts with a native form.aria-haspopup="listbox" whose name is the label and the chosen country.searchPlaceholder, and the list is cmdk's listbox with arrow-key navigation.The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.
This table is React-specific. The SwiftUI, Jetpack Compose, Flutter and Angular implementations share the design contract — the same variants, sizes, states and tokens — but each exposes its own idiomatic interface. Their real usage is in the platform tabs on the example above, not here.
| Prop | Type | Notes |
|---|---|---|
| labelrequired | React.ReactNode | |
| countriesrequired | CountryOption[] | |
| value | string | |
| onValueChange | ((code: string) => void) | |
| placeholder | stringTrigger text with no selection. Default "Select a country". | Trigger text with no selection. Default "Select a country". |
| searchPlaceholder | stringSearch field placeholder and accessible name. Default "Search countries". | Search field placeholder and accessible name. Default "Search countries". |
| emptyMessage | stringShown when nothing matches. Default "No country found." | Shown when nothing matches. Default "No country found." |
| showCode | booleanShow the code beside each name. | Show the code beside each name. |
| name | stringSubmitted with a form as a hidden input. | Submitted with a form as a hidden input. |
| disabled | boolean | |
| invalid | booleanMarks the trigger invalid; pair it with a visible message. | Marks the trigger invalid; pair it with a visible message. |
| aria-describedby | stringid of a description or error message for the trigger. | id of a description or error message for the trigger. |
| className | string |