Input Group

1import {2  InputGroup,3  InputGroupAddon,4  InputGroupInput,5} from "@/components/ui/input-group"67function SearchIcon(props: React.SVGProps<SVGSVGElement>) {8  return (9    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>10      <circle cx="11" cy="11" r="8" />11      <path d="m21 21-4.3-4.3" />12    </svg>13  )14}1516export function Example() {17  return (18    <InputGroup className="max-w-xs" variant="filled">19      <InputGroupInput placeholder="Search..." />20      <InputGroupAddon>21        <SearchIcon />22      </InputGroupAddon>23      <InputGroupAddon align="inline-end">12 results</InputGroupAddon>24    </InputGroup>25  )26}

1import {2  InputGroup,3  InputGroupAddon,4  InputGroupInput,5} from "@/components/ui/input-group"67function SearchIcon(props: React.SVGProps<SVGSVGElement>) {8  return (9    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>10      <circle cx="11" cy="11" r="8" />11      <path d="m21 21-4.3-4.3" />12    </svg>13  )14}1516export function Example() {17  return (18    <InputGroup className="max-w-xs">19      <InputGroupInput placeholder="Search..." />20      <InputGroupAddon align="inline-start">21        <SearchIcon />22      </InputGroupAddon>23    </InputGroup>24  )25}

1import {2  InputGroup,3  InputGroupAddon,4  InputGroupInput,5} from "@/components/ui/input-group"67function EyeOffIcon(props: React.SVGProps<SVGSVGElement>) {8  return (9    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>10      <path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />11      <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />12      <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />13      <path d="m2 2 20 20" />14    </svg>15  )16}1718export function Example() {19  return (20    <InputGroup className="max-w-xs">21      <InputGroupInput type="password" placeholder="Password" />22      <InputGroupAddon align="inline-end">23        <EyeOffIcon />24      </InputGroupAddon>25    </InputGroup>26  )27}

1import {2  InputGroup,3  InputGroupAddon,4  InputGroupButton,5  InputGroupInput,6  InputGroupText,7  InputGroupTextarea,8} from "@/components/ui/input-group"910function CopyIcon(props: React.SVGProps<SVGSVGElement>) {11  return (12    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>13      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />14      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />15    </svg>16  )17}1819function FileCodeIcon(props: React.SVGProps<SVGSVGElement>) {20  return (21    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>22      <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />23      <path d="M14 2v4a2 2 0 0 0 2 2h4" />24      <path d="m5 12-3 3 3 3" />25      <path d="m9 18 3-3-3-3" />26    </svg>27  )28}2930export function Example() {31  return (32    <div className="flex w-full max-w-sm flex-col gap-4">33      <InputGroup>34        <InputGroupInput placeholder="Enter your name" />35        <InputGroupAddon align="block-start">36          <InputGroupText>Full Name</InputGroupText>37        </InputGroupAddon>38      </InputGroup>39      <InputGroup variant="filled">40        <InputGroupTextarea placeholder="// write a function..." className="min-h-24" />41        <InputGroupAddon align="block-start" className="border-b border-border">42          <InputGroupText>43            <FileCodeIcon />44            script.js45          </InputGroupText>46          <InputGroupButton size="icon-xs" className="ml-auto" aria-label="Copy">47            <CopyIcon />48          </InputGroupButton>49        </InputGroupAddon>50      </InputGroup>51    </div>52  )53}

1import {2  InputGroup,3  InputGroupAddon,4  InputGroupButton,5  InputGroupInput,6  InputGroupText,7  InputGroupTextarea,8} from "@/components/ui/input-group"910export function Example() {11  return (12    <div className="flex w-full max-w-sm flex-col gap-4">13      <InputGroup>14        <InputGroupInput placeholder="0.00" />15        <InputGroupAddon align="block-end">16          <InputGroupText>USD</InputGroupText>17        </InputGroupAddon>18      </InputGroup>19      <InputGroup variant="filled">20        <InputGroupTextarea placeholder="Write a comment..." className="min-h-24" />21        <InputGroupAddon align="block-end" className="border-t border-border">22          <InputGroupText>0/280</InputGroupText>23          <InputGroupButton className="ml-auto" size="sm" variant="default">24            Post25          </InputGroupButton>26        </InputGroupAddon>27      </InputGroup>28    </div>29  )30}

1import {2  InputGroup,3  InputGroupAddon,4  InputGroupInput,5} from "@/components/ui/input-group"67function CheckIcon(props: React.SVGProps<SVGSVGElement>) {8  return (9    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>10      <path d="M20 6 9 17l-5-5" />11    </svg>12  )13}1415function CreditCardIcon(props: React.SVGProps<SVGSVGElement>) {16  return (17    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>18      <rect width="20" height="14" x="2" y="5" rx="2" />19      <path d="M2 10h20" />20    </svg>21  )22}2324function MailIcon(props: React.SVGProps<SVGSVGElement>) {25  return (26    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>27      <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />28      <rect x="2" y="4" width="20" height="16" rx="2" />29    </svg>30  )31}3233export function Example() {34  return (35    <div className="grid w-full max-w-sm gap-4">36      <InputGroup>37        <InputGroupInput placeholder="Email" />38        <InputGroupAddon>39          <MailIcon />40        </InputGroupAddon>41      </InputGroup>42      <InputGroup variant="filled">43        <InputGroupInput placeholder="Card number" />44        <InputGroupAddon>45          <CreditCardIcon />46        </InputGroupAddon>47        <InputGroupAddon align="inline-end">48          <CheckIcon />49        </InputGroupAddon>50      </InputGroup>51    </div>52  )53}

1import {2  InputGroup,3  InputGroupAddon,4  InputGroupInput,5  InputGroupText,6} from "@/components/ui/input-group"78export function Example() {9  return (10    <div className="grid w-full max-w-sm gap-4">11      <InputGroup>12        <InputGroupInput placeholder="0.00" />13        <InputGroupAddon>14          <InputGroupText>$</InputGroupText>15        </InputGroupAddon>16        <InputGroupAddon align="inline-end">17          <InputGroupText>USD</InputGroupText>18        </InputGroupAddon>19      </InputGroup>20      <InputGroup variant="filled">21        <InputGroupInput placeholder="example" />22        <InputGroupAddon>23          <InputGroupText>https://</InputGroupText>24        </InputGroupAddon>25        <InputGroupAddon align="inline-end">26          <InputGroupText>.com</InputGroupText>27        </InputGroupAddon>28      </InputGroup>29      <InputGroup variant="filled">30        <InputGroupInput placeholder="username" />31        <InputGroupAddon align="inline-end">32          <InputGroupText>@company.com</InputGroupText>33        </InputGroupAddon>34      </InputGroup>35    </div>36  )37}

1import {2  InputGroup,3  InputGroupAddon,4  InputGroupButton,5  InputGroupInput,6  InputGroupText,7} from "@/components/ui/input-group"89function SearchIcon(props: React.SVGProps<SVGSVGElement>) {10  return (11    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>12      <circle cx="11" cy="11" r="8" />13      <path d="m21 21-4.3-4.3" />14    </svg>15  )16}1718export function Example() {19  return (20    <div className="grid w-full max-w-sm gap-4">21      <InputGroup>22        <InputGroupInput placeholder="example.com" />23        <InputGroupAddon>24          <InputGroupText>https://</InputGroupText>25        </InputGroupAddon>26        <InputGroupAddon align="inline-end">27          <InputGroupButton variant="default">Search</InputGroupButton>28        </InputGroupAddon>29      </InputGroup>30      <InputGroup variant="filled">31        <InputGroupInput placeholder="Find anything..." />32        <InputGroupAddon align="inline-end">33          <InputGroupButton variant="secondary">Go</InputGroupButton>34        </InputGroupAddon>35      </InputGroup>36      <InputGroup>37        <InputGroupInput placeholder="Search..." />38        <InputGroupAddon align="inline-end">39          <InputGroupButton size="icon-xs" variant="outline" aria-label="Search">40            <SearchIcon />41          </InputGroupButton>42        </InputGroupAddon>43      </InputGroup>44      <InputGroup variant="filled">45        <InputGroupInput placeholder="Filter..." />46        <InputGroupAddon align="inline-end">47          <InputGroupButton size="icon-xs" aria-label="Search">48            <SearchIcon />49          </InputGroupButton>50        </InputGroupAddon>51      </InputGroup>52    </div>53  )54}

1import { Kbd } from "@/components/ui/kbd"2import {3  InputGroup,4  InputGroupAddon,5  InputGroupInput,6} from "@/components/ui/input-group"78function SearchIcon(props: React.SVGProps<SVGSVGElement>) {9  return (10    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>11      <circle cx="11" cy="11" r="8" />12      <path d="m21 21-4.3-4.3" />13    </svg>14  )15}1617export function Example() {18  return (19    <InputGroup className="max-w-xs">20      <InputGroupInput placeholder="Search..." />21      <InputGroupAddon>22        <SearchIcon />23      </InputGroupAddon>24      <InputGroupAddon align="inline-end">25        <Kbd>⌘K</Kbd>26      </InputGroupAddon>27    </InputGroup>28  )29}

1import { Spinner } from "@/components/ui/spinner"2import {3  InputGroup,4  InputGroupAddon,5  InputGroupInput,6  InputGroupText,7} from "@/components/ui/input-group"89export function Example() {10  return (11    <div className="grid w-full max-w-sm gap-4">12      <InputGroup>13        <InputGroupInput placeholder="Saving..." disabled />14        <InputGroupAddon align="inline-end">15          <Spinner />16        </InputGroupAddon>17      </InputGroup>18      <InputGroup data-disabled>19        <InputGroupInput placeholder="Please wait..." disabled />20        <InputGroupAddon>21          <Spinner />22        </InputGroupAddon>23        <InputGroupAddon align="inline-end">24          <InputGroupText>Saving...</InputGroupText>25        </InputGroupAddon>26      </InputGroup>27    </div>28  )29}

1import {2  InputGroup,3  InputGroupAddon,4  InputGroupButton,5  InputGroupText,6  InputGroupTextarea,7} from "@/components/ui/input-group"89function CopyIcon(props: React.SVGProps<SVGSVGElement>) {10  return (11    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>12      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />13      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />14    </svg>15  )16}1718function RefreshIcon(props: React.SVGProps<SVGSVGElement>) {19  return (20    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>21      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />22      <path d="M21 3v5h-5" />23      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />24      <path d="M8 16H3v5" />25    </svg>26  )27}2829export function Example() {30  return (31    <div className="grid w-full max-w-md gap-4">32      <InputGroup variant="filled">33        <InputGroupTextarea placeholder="Write a comment..." className="min-h-24" />34        <InputGroupAddon align="block-end" className="border-t border-border">35          <InputGroupText>Line 1, Column 1</InputGroupText>36          <InputGroupButton className="ml-auto" size="sm" variant="default">37            Run38          </InputGroupButton>39        </InputGroupAddon>40      </InputGroup>41      <InputGroup variant="filled">42        <InputGroupTextarea defaultValue="console.log('hello')" className="min-h-24" />43        <InputGroupAddon align="block-start" className="border-b border-border">44          <InputGroupText>script.js</InputGroupText>45          <InputGroupButton size="icon-xs" className="ml-auto" aria-label="Refresh">46            <RefreshIcon />47          </InputGroupButton>48          <InputGroupButton size="icon-xs" aria-label="Copy">49            <CopyIcon />50          </InputGroupButton>51        </InputGroupAddon>52      </InputGroup>53    </div>54  )55}