Input group

Addons, icons, and inline actions around inputs and textareas.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Addon align

Text + input (toolbar selection)

https://

Icon + button + input

Textarea in group

Notes

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@payglocal_ui/flux-ui";

Example

<InputGroup>
  <InputGroupAddon>https://</InputGroupAddon>
  <InputGroupInput placeholder="example.com" />
</InputGroup>