Input Group

The Input Group component provides a way to visually and structurally group an input field with addon elements, buttons, and text labels. It supports inline addons (start/end) and integrates with the Input, Textarea, and Button components.

Preview

Installation

npx novaui-cli add input-group

Import

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupInput,
  InputGroupTextarea,
} from 'novaui-components'

Basic Usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from 'novaui-components'

export function BasicInputGroup() {
  return (
    <InputGroup>
      <InputGroupAddon align="inline-start">https://</InputGroupAddon>
      <InputGroupInput placeholder="example.com" />
    </InputGroup>
  )
}

With End Addon

<InputGroup>
  <InputGroupInput placeholder="0.00" />
  <InputGroupAddon align="inline-end">USD</InputGroupAddon>
</InputGroup>

With Button

import { Search } from 'lucide-react-native'

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupButton size="icon-xs">
    <Search size={16} />
  </InputGroupButton>
</InputGroup>

With Text Element

<InputGroup>
  <InputGroupText>@</InputGroupText>
  <InputGroupInput placeholder="username" />
</InputGroup>

Both Sides

<InputGroup>
  <InputGroupAddon align="inline-start">$</InputGroupAddon>
  <InputGroupInput placeholder="0.00" />
  <InputGroupAddon align="inline-end">.00</InputGroupAddon>
</InputGroup>

Props API

InputGroup

Extends React.ComponentPropsWithoutRef<typeof View>:

InputGroupAddon

Extends React.ComponentPropsWithoutRef<typeof View>:

InputGroupButton

Extends Button props:

InputGroupText

Extends React.ComponentPropsWithoutRef<typeof View>:

InputGroupInput

Extends Input props:

InputGroupTextarea

Extends Textarea props:

Best Practices

1. Use addons for context: Show units, currency symbols, or URL prefixes as addons
2. Keep addons simple: Addons should be short text or small icons
3. Pair with Field: Wrap InputGroup in a Field for labels and error messages
4. Use buttons for actions: Use InputGroupButton for inline search or clear actions
5. Don't overload: Avoid using both addons and buttons simultaneously — pick the pattern that fits

Related Components

• Input - Standalone text input
• Textarea - Multi-line text input
• Field - Form field wrapper with labels and errors