UI Lab

    Composite Input

    Explore different variants and configurations of the Composite Input component.

    Install with:
    npx afnoui add composite-input/composite-input-price
    Price Input with Currency
    Install with:
    npx afnoui add composite-input/composite-input-phone
    Phone Number with Country Code
    Install with:
    npx afnoui add composite-input/composite-input-url
    URL Input with Protocol
    Install with:
    npx afnoui add composite-input/composite-input-icon-prefix
    Input with Icon Prefix
    Install with:
    npx afnoui add composite-input/composite-input-button-suffix
    Input with Button Suffix
    Install with:
    npx afnoui add composite-input/composite-input-password
    Password with Toggle
    Install with:
    npx afnoui add composite-input/composite-input-select-suffix
    Input with Select Suffix
    Install with:
    npx afnoui add composite-input/composite-input-search
    Search with Category Filter
    Install with:
    npx afnoui add composite-input/composite-input-domain
    Domain Input
    .example.com

    Your site will be available at mysite.example.com

    Install with:
    npx afnoui add composite-input/composite-input-credit-card
    Credit Card Input
    💳