Source: https://tailwindcss.com/plus/ui-blocks/application-ui/forms/input-groups

• • Marketing

  • Application UI

  • Ecommerce

  • Documentation

• Application Shells

  • Stacked Layouts

  • Sidebar Layouts

  • Multi-Column Layouts

• Headings

  • Page Headings

  • Card Headings

  • Section Headings

• Data Display

  • Description Lists

  • Stats

  • Calendars

• Lists

  • Stacked Lists

  • Tables

  • Grid Lists

  • Feeds

• Forms

  • Form Layouts

  • Input Groups

  • Select Menus

  • Sign-in and Registration

  • Textareas

  • Radio Groups

  • Checkboxes

  • Toggles

  • Action Panels

  • Comboboxes

• Feedback

  • Alerts

  • Empty States

• Navigation

  • Navbars

  • Pagination

  • Tabs

  • Vertical Navigation

  • Sidebar Navigation

  • Breadcrumbs

  • Progress Bars

  • Command Palettes

• Overlays

  • Modal Dialogs

  • Drawers

  • Notifications

• Elements

  • Avatars

  • Badges

  • Dropdowns

  • Buttons

  • Button Groups

• Layout

  • Containers

  • Cards

  • List containers

  • Media Objects

  • Dividers

• Page Examples

  • Home Screens

  • Detail Screens

  • Settings Screens

5-day Mini-Course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

Input Groups

Use these Tailwind CSS input group components to create things like search bars with buttons, credit card forms, and other form inputs with combined input and label elements. These components are designed and built by the Tailwind CSS team, and include a variety of different styles and layouts.

Input with inline leading add-on and trailing dropdown

---

PreviewCode

HTMLReactVue

Input with inline leading add-on and trailing dropdown

---

PreviewCode

HTMLReactVue

Input with label

---

Preview

Get the code →

Input with label

---

Preview

Get the code →

Input with label and help text

---

Preview

Get the code →

Input with label and help text

---

Preview

Get the code →

Input with validation error

---

Preview

Get the code →

Input with validation error

---

Preview

Get the code →

Input with disabled state

---

Preview

Get the code →

Input with disabled state

---

Preview

Get the code →

Input with hidden label

---

Preview

Get the code →

Input with hidden label

---

Preview

Get the code →

Input with corner hint

---

Preview

Get the code →

Input with corner hint

---

Preview

Get the code →

Input with leading icon

---

Preview

Get the code →

Input with leading icon

---

Preview

Get the code →

Input with trailing icon

---

Preview

Get the code →

Input with trailing icon

---

Preview

Get the code →

Input with add-on

---

Preview

Get the code →

Input with add-on

---

Preview

Get the code →

Input with inline add-on

---

Preview

Get the code →

Input with inline add-on

---

Preview

Get the code →

Input with inline leading and trailing add-ons

---

Preview

Get the code →

Input with inline leading and trailing add-ons

---

Preview

Get the code →

Input with inline leading dropdown

---

Preview

Get the code →

Input with inline leading dropdown

---

Preview

Get the code →

Input with leading icon and trailing button

---

Preview

Get the code →

Input with leading icon and trailing button

---

Preview

Get the code →

Inputs with shared borders

---

Preview

Get the code →

Inputs with shared borders

---

Preview

Get the code →

Input with inset label

---

Preview

Get the code →

Input with inset label

---

Preview

Get the code →

Inputs with inset labels and shared borders

---

Preview

Get the code →

Inputs with inset labels and shared borders

---

Preview

Get the code →

Input with overlapping label

---

Preview

Get the code →

Input with overlapping label

---

Preview

Get the code →

Input with pill shape

---

Preview

Get the code →

Input with pill shape

---

Preview

Get the code →

Input with gray background and bottom border

---

Preview

Get the code →

Input with gray background and bottom border

---

Preview

Get the code →

Input with keyboard shortcut

---

Preview

Get the code →

Input with keyboard shortcut

---

Preview

Get the code →