defaultValue.
54 | {JSON.stringify(selectedValues, null, 2)}
70 |
74 | >
75 | _
76 |
77 |
87 | {JSON.stringify(selectedCountry, null, 2)}
88 |
89 |
93 | >
94 | _
95 |
96 |
96 | {JSON.stringify(selectedCountry, null, 2)}
97 |
98 |
102 | >
103 | _
104 |
105 | UK: 00447700000000
80 | NO: 004740000000
83 |
91 | {JSON.stringify(
92 | {
93 | country: countryData,
94 | phoneNumber: form.getValues().phone,
95 | },
96 | null,
97 | 2
98 | )}
99 |
100 |
104 | >
105 | _
106 |
107 |
99 | {JSON.stringify(selectedCountries, null, 2)}
100 |
101 |
105 | >
106 | _
107 |
108 | defaultValue.
78 |
114 | {JSON.stringify(form.getValues(), null, 2)}
115 |
116 |
120 | >
121 | _
122 |
123 |
115 | {JSON.stringify(form.getValues(), null, 2)}
116 |
117 |
121 | >
122 | _
123 |
124 | 33 | An accessible autocomplete search with multiple select, displayed as 34 | pills built for shadcn/ui. 35 |
36 |
61 | The SelectPills component is a fast autocomplete search
62 | with multiple select, displayed as pills. Fully accessible it allows
63 | you to navigate the list with the keyboard using ↑ and{" "}
64 | ↓ keys, and select with ⮐ key.
65 |
70 | The SelectPills is built using out-of-the-box{" "}
71 |
72 | shadcn/ui
73 | {" "}
74 | components, including the Popover,Badge and{" "}
75 | Input components.
76 |
82 | Install the country-dropdown package using your preferred
83 | package manager:
84 |
90 | Copy the component below to{" "}
91 | components/ui/currency-select.tsx.
92 |
UK: 00447700000000
104 | NO: 004740000000
107 |
115 | {JSON.stringify(
116 | {
117 | country: countryData,
118 | phoneNumber: form.getValues().phone,
119 | },
120 | null,
121 | 2
122 | )}
123 |
124 |
128 | >
129 | _
130 |
131 | 163 | {body} 164 |
165 | ) 166 | }) 167 | FormMessage.displayName = "FormMessage" 168 | 169 | export { 170 | useFormField, 171 | Form, 172 | FormItem, 173 | FormLabel, 174 | FormControl, 175 | FormDescription, 176 | FormMessage, 177 | FormField, 178 | } 179 | -------------------------------------------------------------------------------- /src/lib/demos/phone-input/index.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React from "react"; 3 | import { zodResolver } from "@hookform/resolvers/zod"; 4 | import { useForm } from "react-hook-form"; 5 | import { z } from "zod"; 6 | import { toast } from "sonner"; 7 | 8 | import { Console } from "@/components/console"; 9 | 10 | import { Country, CountryDropdown } from "@/components/country-dropdown"; 11 | import { PhoneInput, phoneSchema, CountryData } from "@/components/phone-input"; 12 | import { Button } from "@/components/ui/button"; 13 | import { Card, CardContent, CardFooter } from "@/components/ui/card"; 14 | import { 15 | Form, 16 | FormControl, 17 | FormDescription, 18 | FormField, 19 | FormItem, 20 | FormLabel, 21 | FormMessage, 22 | } from "@/components/ui/form"; 23 | 24 | const FormSchema = z.object({ 25 | phone: phoneSchema, 26 | country: z.string({ 27 | required_error: "Please select a country", 28 | }), 29 | }); 30 | 31 | type FormSchema = z.inferUK: 00447700000000
112 | NO: 004740000000
115 |
123 | {JSON.stringify(
124 | {
125 | country: countryData,
126 | phoneNumber: form.getValues().phone,
127 | },
128 | null,
129 | 2
130 | )}
131 |
132 |
136 | >
137 | _
138 |
139 |
126 | {JSON.stringify(
127 | {
128 | currency: form.getValues().currency,
129 |
130 | value: form.getValues().value,
131 | },
132 | null,
133 | 2
134 | )}
135 |
136 |
140 | >
141 | _
142 |
143 |
131 | {JSON.stringify(
132 | {
133 | country: countryData,
134 | phoneNumber: form.getValues().phone,
135 | },
136 | null,
137 | 2
138 | )}
139 |
140 |
144 | >
145 | _
146 |
147 |
134 | {JSON.stringify(
135 | {
136 | currency: form.getValues().currency,
137 |
138 | value: form.getValues().value,
139 | },
140 | null,
141 | 2
142 | )}
143 |
144 |
148 | >
149 | _
150 |
151 | An ISO 4217 compliant currency select component.
40 |
65 | The CurrencySelect component uses the
66 |
67 |
71 | Select
72 |
73 | {" "}
74 | component from the{" "}
75 |
76 | shadcn/ui
77 | {" "}
78 | library.
79 |
84 | The CountryDropdown is built using the{" "}
85 |
89 | country-data-list
90 | {" "}
91 | package which provides{" "}
92 |
96 | ISO 4217
97 | {" "}
98 | country codes.
99 |
103 | My component imports a set of constants, customCurrencies
104 | and allCurrencies. The customCurrencies{" "}
105 | array include only countries i want to show in the dropdown. The{" "}
106 | allCurrencies array include all countries except the ones
107 | in customCurrencies array.
108 |
122 | Install the country-dropdown package using your preferred
123 | package manager:
124 |
130 | Copy the component below to{" "}
131 | components/ui/currency-select.tsx.
132 |
153 | The small variant allows you to have a shorthand version displaying
154 | only the currency code in the SelectTrigger. With the
155 | example below you can see how to use it in a form although it requires
156 | a little bit more work to display the FormLabel and
157 | validation messages correctly, see code below.
158 |
An ISO 3166 compliant phone input component.
42 |
68 | The PhoneInput component is a compliant phone input with
69 | international call prefixes. It's built using the{" "}
70 |
74 | libphonenumber-js
75 | {" "}
76 | package for parsing and validating phone numbers.
77 |
82 | The PhoneInput component is built without{" "}
83 |
84 | shadcn/ui
85 | {" "}
86 | dependencies, however is styled to fit seamlessly with the rest of the
87 | component library. You can fully customize the component to your
88 | needs.
89 |
CountryDropdown
93 |
96 | The PhoneInput component can be used in conjunction with
97 | the CountryDropdown component to provide a better user
98 | experience by allowing the user to select the country before entering
99 | the phone number.
100 |
106 | Install the PhoneInput dependencies using your preferred
107 | package manager:
108 |
114 | Copy the component below to components/ui/phone-input.tsx
115 | .
116 |
137 | Connected values allow you to connect both the{" "}
138 | CountryDropdown and PhoneInput components.
139 |
164 | A standalone PhoneInput with{" "}
165 |
166 | shadcn/ui
167 | {" "}
168 | forms.
169 |
An ISO 3166 compliant dropdown component for selecting a country.
38 |
63 | The CountryDropdown component uses the{" "}
64 |
65 |
69 | Popover
70 |
71 | {" "}
72 | and{" "}
73 |
74 |
78 | Command
79 |
80 | {" "}
81 | components from the{" "}
82 |
83 | shadcn/ui
84 | {" "}
85 | library.
86 |
90 | The CountryDropdown is built using{" "}
91 |
95 | react-circle-flags
96 | {" "}
97 | and{" "}
98 |
102 | country-data-list
103 | {" "}
104 | packages.
105 |
107 | The country-data-list package provides both{" "} 108 | 112 | ISO 3166-1 alpha-2 113 | {" "} 114 | and{" "} 115 | 119 | ISO 3166-1 alpha-3 120 | {" "} 121 | country codes. Select an country from the demo above to see the full 122 | country object. 123 |
124 |
129 | Install the country-dropdown package using your preferred
130 | package manager:
131 |
137 | Copy the component below to{" "}
138 | components/ui/country-dropdown.tsx.
139 |
160 | A slim version makes it easy for you to have a shorthand version 161 | displaying only the country flag. This could be used in conjunction 162 | with{" "} 163 | 167 | internationalisation 168 | 169 | . 170 |
171 | 172 |
194 | The multiple country selector is an additional option that returns a
195 | string array. When using in conjunction with Zod schema make sure to
196 | always use a string array; z.array(z.string()). Also
197 | provide an empty array in the defaultValue prop and
198 |
221 | Easily use the CountryDropdown with{" "}
222 |
223 | shadcn/ui
224 | {" "}
225 | forms.
226 |