InputGroup

InputGroup combines a text input with leading or trailing addons into a single visual unit. Use to provide context for an expected format, such as a URL prefix or a search button.

Use inline addons for short prefixes, suffixes, icons, and buttons. Use block addons for helper text or controls that need the full input width.

Basic usage

Code

<InputGroup>
  <InputGroupAddon>
    <InputGroupText>https://</InputGroupText>
  </InputGroupAddon>

  <InputGroupInput className="tw:pl-0.5!" placeholder="portal.agvend.com" />
</InputGroup>

With Textarea

Code

<InputGroup>
  <InputGroupTextarea placeholder="Add delivery instructions" />

  <InputGroupAddon align="block-end">
    <InputGroupText>Visible to the fulfillment team</InputGroupText>
  </InputGroupAddon>
</InputGroup>

Block Start

Code

<InputGroup>
  <InputGroupAddon align="block-start" className="tw:border-b">
    <InputGroupText>Internal note</InputGroupText>
  </InputGroupAddon>

  <InputGroupTextarea placeholder="Visible to the sales team only" />
</InputGroup>

With Button

Code

<InputGroup>
  <InputGroupInput placeholder="Search..." />

  <InputGroupAddon align="inline-end">
    <InputGroupButton aria-label="Search">
      <SearchIcon />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

API

InputGroup

No documented props

InputGroupAddon

Name	Type/Description
align = "inline-start"	"inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined

InputGroupButton

Name	Type/Description
className	string | ((state: ButtonState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
focusableWhenDisabled = false	boolean | undefined Whether the button should be focusable when disabled.
nativeButton = true	boolean | undefined Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
size = "xs"	"sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined
style	CSSProperties | ((state: ButtonState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.
type = "button"	"button" | "submit" | "reset" | undefined
variant = "ghost"	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined

InputGroupInput

No documented props

InputGroupText

No documented props

InputGroupTextarea

No documented props