Svelte Particles

Input Group Particles

Reach for these patterns when a plain field is not enough and the input needs surrounding controls, affordances, or compositional UI around the core value entry.

Basic Input Group
End Icon
i.cal.com/
Start Text
@animations.com
End Text
https://
.com
Start And End Text
End Tooltip
⌘K
Keyboard Shortcut
With Inner Label
Disabled
Loading Spinner
78% used
With Textarea
With Icon Button
With Button
Badge
With Badge
Primary
With Badge And Menu
Mini Editor Group Toggle
With Search
With Start Tooltip
With Clear Button
Search Input With Loader And Voice
0/14
With Character Count

Enter a password. Must contain:

  • At least 8 characters - Requirement not met
  • At least 1 number - Requirement not met
  • At least 1 lowercase letter - Requirement not met
  • At least 1 uppercase letter - Requirement not met
Password Input With Strength Indicator
Code Snippet With Language Selector
Message Composer With Attachments
Press Enter to send
Chat Input With Voice And Send Button
https://
With Start Text End Tooltip
https://
Input Group With Mimicking URL Bar
/
With Keyboard Shortcut Search
Start Loading Spinner
End Loading Spinner