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
_13.07.18/w=1920,quality=90,fit=scale-down)
_09.35.30_p._m..png&w=1920&q=90)
_23.27.14/w=1920,quality=90,fit=scale-down)
_01.18.51_p._m..png&w=1920&q=90)
_05.22.43_p._m..png&w=1920&q=90)
_16.08.33/w=1920,quality=90,fit=scale-down)
