Home/
Form Fields
Form Fields

Form Fields

Patterns for Form Fields

Input fields are one of the primitive elements for the web, allowing user to edit and send information back to the server.
 
Recommendation (Ad)
https://uink.digital
 
393. Colored Checkboxes

393. Colored Checkboxes

Desktop, Decision Making, Web, English, Image / Illustration, Checkbox

Open pattern
389. Text Edit Inline Input

389. Text Edit Inline Input

Desktop, Accessibility, Decision Making, Web, English, Text Input, Hypertext Links, Modal

Open pattern
388. Multiple Item Selection Drag & Drop

388. Multiple Item Selection Drag & Drop

Desktop, Accessibility, Feedback, Awareness, Decision Making, Web, Español, User Selection, Drag & Drop Gesture, Tooltip, Scrollbar, Checkbox

Open pattern
359. Discord - Button to Input Transition

359. Discord - Button to Input Transition

Desktop, Decision Making, Pathfinding, Consent, Web, Español, Text Input, Hypertext Links

Open pattern
No preview

354. Figma - Floating Form with Steps

Desktop, Feedback, Consent, Awareness, Web, English, Text Input, Side Panel

Open pattern
362. Modal Blackout with Form & Animations

362. Modal Blackout with Form & Animations

Desktop, Accessibility, Apple OS, Español, Modal, Text Input, Transition

Open pattern
343. Behance - Login with Code Validation

343. Behance - Login with Code Validation

Desktop, Consent, Decision Making, Awareness, Web, Español, Text Input, Hypertext Links, Pagination

Open pattern
342. Savee - Light/Dark Mode Switcher

342. Savee - Light/Dark Mode Switcher

Desktop, Accessibility, Pathfinding, Web, English, Checkbox, Tabs

Open pattern
341. Image Grid Customization Sliders

341. Image Grid Customization Sliders

Desktop, Accessibility, Pathfinding, Web, English, Animation, Drag & Drop Gesture, Range Field

Open pattern
339. Asana - Platform Onboarding Simulator

339. Asana - Platform Onboarding Simulator

Desktop, Decision Making, Awareness, Pathfinding, Web, English, Text Input, Pagination, Animation, Hypertext Links

Open pattern
No preview

336. Floating Popover on Click

Desktop, Pathfinding, Awareness, Apple OS, English, Tooltip, Text Input, Hypertext Links

Open pattern
322. Search on Menu Items

322. Search on Menu Items

Desktop, Pathfinding, Awareness, Apple OS, Español, Navbar, Dropdown Menu, Text Input

Open pattern
320. Discord - Sign In with Loading Tips

320. Discord - Sign In with Loading Tips

Desktop, Pathfinding, Onboarding, Apple OS, English, QR, Text Input, Password Input, Button

Open pattern
No preview

315. Signal - PIN Reminder

Desktop, Awareness, Accessibility, Apple OS, English, Text Input, Modal, Banner, Hypertext Links

Open pattern
312. Pocket - View Switcher

312. Pocket - View Switcher

Desktop, Pathfinding, Accessibility, Web, Español, Navbar, Thumbnail, Toggle Field, Radio Button

Open pattern
310. HubSpot - Checkbox Confirmation

310. HubSpot - Checkbox Confirmation

Desktop, Decision Making, Awareness, Web, Español, Modal, Text Input, Button

Open pattern
303. Background Animation

303. Background Animation

Desktop, Onboarding, Awareness, Web, English, Animation, Password Input

Open pattern
253. Youtube - Table Row Selector

253. Youtube - Table Row Selector

Desktop, Accessibility, Pathfinding, Awareness, Web, English, User Selection, Text Input, Fixed on Scroll, Thumbnail, YouTube, Google

Open pattern
214. Netflix - Information Toggle

214. Netflix - Information Toggle

Desktop, Accessibility, Web, Español, Dropdown Menu, Video, Thumbnail, Navbar, Button, Toggle Field, Netflix

Open pattern
95. Delete Confirmation with Name

95. Delete Confirmation with Name

Desktop, Awareness, Web, English, Text Input, Modal, Hypertext Links, Webflow

Open pattern
145. Communication Preferences on Sign Up Flow

145. Communication Preferences on Sign Up Flow

Desktop, Appreciation, Onboarding, ▼ Consent, Web, English, Text Input, Hypertext Links, Pagination, Google, Google Suite

Open pattern
171. Slack - Multi-browser Sign In

171. Slack - Multi-browser Sign In

Desktop, Onboarding, Pathfinding, Apple OS, Web, Email, English, Navbar, Text Input, Hypertext Links, Button, Numeric Input, Slack

Open pattern
29. General Form Errors Banner

29. General Form Errors Banner

Desktop, Awareness, Web, English, Text Input, Banner, Notification Badge, Mailchimp

Open pattern
188. Trello - Color shapes for Colour-blind

188. Trello - Color shapes for Colour-blind

Desktop, Accessibility, Web, Español, Modal, Tooltip, Hypertext Links, Text Input, Trello

Open pattern