WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerEmail InputFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text EditorSchema Builder
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselCSV ViewerDOCX EditorDOCX ViewerExcel ViewerFile SystemImage CropperImage LightboxLocation MapPDF ViewerPowerPoint ViewerQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryTheme

Inputs

Email Input

InputsEmail InputNew
Duration PickerFile Upload
Live props
Behavior
multiple
suggestTypos
showValidIcon
clearable
maxNo limit
invalidEntries
Field
label
description
error
required
invalid
disabled
readOnly
Content
placeholder
name
Appearance
showAvatars
size
variant
radius
chipVariant
tone
color
Code
import { EmailInput } from "@/components/ui/email-input"

<EmailInput />
ProNew

v1.0.0·Added in 1.5.0

An email field for one address or a list of recipients, with domain completion, typo hints, contacts and validation.

One address: type a name and after the @ a list completes the domain (emma@gm offers emma@gmail.com); Arrow Down and Up move through it, Enter or Tab takes the highlighted address, Escape closes it. Leaving the field checks the address: a malformed one shows the error, a likely typo shows "Did you mean emma@gmail.com?" with the fix as a button, and a valid one gets a green check. The error goes away as soon as the text is fixed. With multiple, every address becomes a chip with the person's initials or photo: type and press Enter, a comma, a semicolon or a space after a full address; pick a contact from the list by name or address; or paste a whole list like Emma Carter <emma@acme.com>, liam@acme.com; olivia@acme.com and every entry becomes a chip with its name, duplicates once (the existing chip pulses). A bad address stays as a red chip and the field says why; a likely typo turns its chip amber and the hint fixes it in one tap. Backspace in the empty text brings the last chip back as text to fix. Arrow Left at the start of the text moves onto the chips: Left and Right walk, Home and End jump, Delete or Backspace removes, Enter or F2 (or a double-click, or a second tap) edits, Cmd/Ctrl+C copies Name <address>, Escape returns to the text. Cmd/Ctrl+Enter adds the text and submits the form. On a phone the keyboard shows the email layout, text is 16px so iOS never zooms, the chip × buttons have a large touch area and the list stays in the page above the keyboard.

Add to a project

npx wingo-ui@latest add email-input

Pro item: the CLI needs a Pro account. See plans

Dependencies

motionlucide-reactavatarbadgefieldlistboxuse-controllable-statemotiontext-matchtonesui-config

Files

  • components/ui/email-input.tsx

See also

Tag InputInputFieldAvatarMulti Select
PreviousDuration PickerNext File Upload

Create your account

Start your 14-day free trial

""

+typos+check

Type emma@gm and press Tab, or try emma@gmial.com and leave the field.Type emma@gm, or try emma@gmial.com