UX PATTERN
Terms & Conditions
Terms and conditions are always hard to read and understand, that doesn't mean they are not important. Usually present after sign up or login forms.
Purpose of the Pattern
An interface pattern that asks users to accept legal terms before continuing with a critical action, such as signing up or making a purchase. Ensures the user gives informed consent regarding legal terms or policies before accessing certain features or completing a key action.
Best practices:
✅ Common Variations
- Mandatory checkbox linking to terms
- Dual buttons (Accept / Decline)
- Blocking modal with forced scroll
- Intermediate screen before access
⚠️ Common Mistakes to Avoid
- Hiding or not linking to the full terms
- Not offering a way to decline
- Forcing acceptance to continue (dark pattern)
- Making terms unreadable via forced scrolling
Related UI Patterns:
Modals | Text Fields | Hypertext Links
Real-World Examples:
359. Discord - Button to Input Transition
359. Discord - Button to Input Transition
Input FieldHypertext
354. Figma - Floating Form with Steps
354. Figma - Floating Form with Steps
Input FieldSide Panel
343. Behance - Login with Code Validation 
343. Behance - Login with Code Validation
Input FieldHypertextPagination
319. Wordpress - Delete Confirmation with Name
319. Wordpress - Delete Confirmation with Name
169. Youtube Studio - Delete Content Forever
169. Youtube Studio - Delete Content Forever
161. Apple - Two-Factor Validation (2FA)_13.07.18/w=1920,quality=90,fit=scale-down)
161. Apple - Two-Factor Validation (2FA)
147. Linked Settings for User Permissions_09.35.30_p._m..png&w=1920&q=90)
147. Linked Settings for User Permissions
208. Checkbox for User Confirmation_23.27.14/w=1920,quality=90,fit=scale-down)
208. Checkbox for User Confirmation
25. Apple - Two-factor Auth_01.18.51_p._m..png&w=1920&q=90)
25. Apple - Two-factor Auth
119. PrestaShop - Site Cookie Management_05.22.43_p._m..png&w=1920&q=90)
119. PrestaShop - Site Cookie Management
126. WeTransfer - In-front Site Terms_16.08.33/w=1920,quality=90,fit=scale-down)
126. WeTransfer - In-front Site Terms
36. Scroll Required for User Confirmation
36. Scroll Required for User Confirmation
19. Twitter - Email Validation on Sign Up
19. Twitter - Email Validation on Sign Up
180. Dedicated Screen for Action Confirmation
180. Dedicated Screen for Action Confirmation