Skip to main content

InputGroup

Form Controls
Stable

Input with prefix text, suffix text, icon addons, and inline buttons. Supports all four positions: inline-start, inline-end, block-start, block-end.

Quick Import
Full Documentation
import { InputGroup } from "@cohere-ai/waypoint-ui/input-group";

Live Preview

Loading InputGroup...
Open in StorybookOpen in v0View Docs

Props

NameTypeDefaultDescription
align (InputGroupAddon)'inline-start' | 'inline-end' | 'block-start' | 'block-end''inline-start'Addon position
size (InputGroupButton)'xs' | 'sm' | 'icon-xs' | 'icon-sm''xs'Button size
variant (InputGroupButton)Button variant'ghost'Button visual style

Examples

Input with Prefix

URL input with https:// prefix

1
import {
2
  InputGroup, InputGroupAddon, InputGroupText, InputGroupInput,
3
} from '@cohere-ai/waypoint-ui/input-group';
4
 
5
<InputGroup>
6
  <InputGroupAddon><InputGroupText>https://</InputGroupText></InputGroupAddon>
7
  <InputGroupInput placeholder="example.com" />
8
</InputGroup>

Input with Suffix Button

Search input with an inline search button

1
import {
2
  InputGroup, InputGroupAddon, InputGroupInput, InputGroupButton,
3
} from '@cohere-ai/waypoint-ui/input-group';
4
 
5
<InputGroup>
6
  <InputGroupInput placeholder="Search..." />
7
  <InputGroupAddon align="inline-end">
8
    <InputGroupButton><SearchIcon /></InputGroupButton>
9
  </InputGroupAddon>
10
</InputGroup>

Found an Issue?

If you've encountered a bug or have feedback about the InputGroup component, please report it to our team. Your feedback helps us improve Waypoint.

Available for all users • Issue will be created in Linear

Was this page helpful?

Your feedback helps us improve our documentation.

Need Help?

Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.