104Get started
HextaUI

Input group: Text

Use <InputGroupText /> for units, currencies and URL parts. The input's padding shrinks next to an addon so the text reads as one value.

$
USD
https://
.com
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"

export function InputGroupTextDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <InputGroup>
        <InputGroupInput
          placeholder="0.00"
          inputMode="decimal"
          aria-label="Price"
        />
        <InputGroupAddon>
          <InputGroupText>$</InputGroupText>
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupText>USD</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="hextaui" aria-label="Domain" />
        <InputGroupAddon>
          <InputGroupText>https://</InputGroupText>
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupText>.com</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

Add this example

This adds the example as components/examples/input-group/text.tsx, together with the Input group component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/input-group-text.json

To add only the component, follow the Input group installation.

Props in this example

The Input group props this example sets, from the API reference.

InputGroupAddon

PropTypeDefault
align
"inline-start" | "inline-end" | "block-start" | "block-end""inline-start"

Every prop is in the Input group API reference.

More Input group examples

See them all, with keyboard support and accessibility notes, on the Input group page.

Related components