Patterns for 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.
✅ 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
Frequently includes
Modals | Form Fields | Hypertext Links
Live examples
359. Discord - Button to Input Transition
359. Discord - Button to Input Transition
Text InputHypertext Links
354. Figma - Floating Form with Steps
354. Figma - Floating Form with Steps
Text InputSide Panel
343. Behance - Login with Code Validation 
343. Behance - Login with Code Validation
Text InputHypertext LinksPagination
319. Wordpress - Delete Confirmation with Name
319. Wordpress - Delete Confirmation with Name
ModalAvatarButtonHypertext Links
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=75)
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=75)
25. Apple - Two-factor Auth
119. PrestaShop - Site Cookie Management_05.22.43_p._m..png&w=1920&q=75)
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