Choice3 checks

FormCountry

Searchable country list with flags, saved as an ISO code.

Example
Installation
bunx --bun shadcn@latest add @fieldkit/form-country

Needs the @fieldkit registry. Add it once

Usage
  1. 1

    Add the field to your schema

    schema.ts
    import { z } from "zod"import { countryField } from "@/lib/field-schemas"
export const schema = z.object({  country: countryField({ countries: ["KE", "UG", "TZ"] }),})
  2. 2

    Render it inside a Form

    The name prop matches the schema key.

    example-form.tsx
    import { Form } from "@/components/form/form"import { FormCountry } from "@/components/form/form-country"import { FormSubmit } from "@/components/form/form-submit"import { FieldGroup } from "@/components/ui/field"import { schema } from "./schema"
export function ExampleForm() {  return (    <Form      schema={schema}      defaultValues={{ country: "" }}      onSubmit={save}    >      <FieldGroup>        <FormCountry name="country" />        <FormSubmit>Save</FormSubmit>      </FieldGroup>    </Form>  )}
Checks
One of the countriesdefaultChoose a country
Allowed countriescountriesChoose a country
Stores ISO codesdefaultNone
Best practices
  • Search by name or ISO code
  • Pair with FormPhone countrySelect={false} when the country is fixed
Try these values
Terminal
countryField({ countries: ["KE", "UG", "TZ"] })
InputResultOutput
"KE"Valid"KE"
"RW"Invalid
Choose a country
"Kenya"Invalid
Choose a country
""Invalid
Choose a country
API reference

FormCountry

countriesArray<CountryCode>Overrides the schema's allowed countries.
placeholderstring = "Choose a country"Shown when empty.

Field frame

namestringKey in the schema. Also picks the preset label and autocomplete.
labelReact.ReactNodeOverrides the preset label. Pass null to hide it.
descriptionReact.ReactNodeHint under the control.
requiredbooleanOverrides the asterisk read from the schema.
fieldPropsFormFieldPropsProps for the wrapping Field, such as className.

Search docs

Find a component, input or example