shadcn.io is not affiliated with official shadcn/ui
Phone Auth Login Block for Svelte
A start-aligned phone sign-in for a carpool app: a country select, a phone field that lays the number out as you type for that country with a length check, then a six-digit code and a signed-in result.
Installation
Overview
Sign people in with a text message, with this phone auth login block for Svelte with Ark UI. It's the sign-in page of Rideloft, a carpool app: the page's side rails run the full height of the screen and one band crosses it between two rules, holding a start-aligned column. A Select chooses the country, each item written as its ISO code, name and dial code (US United States +1), and a phone field in an Input Group carries the dial code as its addon with a two-letter tile, so there is no flag emoji. The national number is laid out as you type from a typed pattern for that country, (415) 555-0132 in the United States, 07400 123456 in the United Kingdom, 06 12 34 56 78 in France, and checked for length and a leading 0 when the form is sent. The Shine Button "Text me a code" is the only colored control; a good press swaps, in the same space, to six slots of Input OTP with the demo code printed once, then to "You're signed in". Numbers always read left to right, even in a right-to-left page. It's built from Select, Input Group, Input OTP, Field, Button, Shine Button and Guides, with a CSS entrance only. For ride, delivery and any app whose users are on a phone.
FAQ
What stays in the page, and how do I send real texts?
Everything. Sending waits 700 ms and shows the code step; no text arrives, and the six digits that pass are printed on the page (482 913). In a product, post the dial code and digits to your server where the code says so, which asks an SMS provider to deliver a one-use code that expires in minutes and limits how often one number can ask. Check the typed code on the server, never in the page.
How does the formatter work?
Each country has a typed pattern, with a # for each digit and its own punctuation, a number of digits it implies and a real-looking example. Typing keeps only digits, cuts them to the country's length and pours them into the pattern, adding punctuation only once a digit follows it. Changing the country keeps the digits you typed and lays them out again. It formats national numbers only for five countries as an example: use a library such as libphonenumber for the real list, which has many more rules than a pattern per country.
What does the length check say?
Pressing Text me a code with nothing typed asks for a number; with too few digits it says how many the country's numbers have and how many you typed; for countries that dial a leading 0 at home, such as the United Kingdom, it says numbers start with 0. The message sits under the field in a line that is always reserved, the field is marked invalid and focus moves there. The button is never disabled, so keyboard users can always reach it and learn what is missing.
How is the number shown after sending?
In international form, which drops the leading 0 that is dialled only at home: 07400 123456 becomes +44 7400 123456, and (415) 555-0132 becomes +1 (415) 555-0132. Store numbers that way (E.164, without the punctuation) so one number never appears in two forms.