Input Group

npx shadcn@latest add https://ui.saasflare.io/r/input-group.json

pnpm add @saasflare/ui

"use client"import { InputGroup, InputGroupAddon, InputGroupInput } from "@saasflare/ui"/** An input fused with a currency prefix addon into one visual unit. */export function Demo() {    return (        <div className="w-full max-w-sm">            <InputGroup>                <InputGroupAddon>$</InputGroupAddon>                <InputGroupInput type="number" placeholder="0.00" />                <InputGroupAddon align="inline-end">USD</InputGroupAddon>            </InputGroup>        </div>    )}

"use client"import {    InputGroup,    InputGroupAddon,    InputGroupButton,    InputGroupInput,} from "@saasflare/ui"/** A workspace URL field with a domain prefix and an inline action button. */export function Demo() {    return (        <div className="w-full max-w-sm">            <InputGroup>                <InputGroupAddon>app.saasflare.io/</InputGroupAddon>                <InputGroupInput placeholder="acme" />                <InputGroupAddon align="inline-end">                    <InputGroupButton variant="soft">Copy</InputGroupButton>                </InputGroupAddon>            </InputGroup>        </div>    )}

"use client"import {    InputGroup,    InputGroupAddon,    InputGroupInput,    InputGroupText,    MagnifyingGlassIcon,} from "@saasflare/ui"/** A search input with a leading icon addon. */export function Demo() {    return (        <div className="w-full max-w-sm">            <InputGroup>                <InputGroupAddon>                    <InputGroupText>                        <MagnifyingGlassIcon />                    </InputGroupText>                </InputGroupAddon>                <InputGroupInput placeholder="Search members…" />            </InputGroup>        </div>    )}