Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Inline Form
A React inline form with email input and subscribe button in horizontal flex layout using sr-only label for accessibility
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Newsletter signups need inline forms—input and button on same line for compact call-to-action. This React form uses React Hook Form with Zod email validation featuring flex items-start gap-2 layout with Input taking flex-1 and Button beside it using sr-only FormLabel for screen reader accessibility without visual label. Built with max-w-md container and horizontal flex structure, inline forms save vertical space—perfect for newsletter signups, email capture, search bars, quick filters, or anywhere single-field forms need compact horizontal presentation maximizing conversion with minimal visual footprint.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Vertical Layout
Standard vertical field stacking
Compact Form
Space-efficient login form
Input Action Empty
Email subscribe in empty state
Standard Button
Button component
Standard Input
Text input field
Dialog Form
Modal form layout
Questions you might have
React Form - Responsive Layout
A React form with responsive grid layout using grid-cols-1 md:grid-cols-2 adapting from vertical mobile to two-column desktop
React Compact Form
A React compact login form with reduced spacing using space-y-3, h-9 inputs, and text-sm styling for Username and Password fields