InputGroup

A wrapper component for all form components to combine them with icons or text.

The InputGroup component is a bootstrap style component that enables the developer to give more information to the end user by adding supportive icons and text to the sides of a form element, or by even combining multiple form elements.

Source code

Theme

Tone

Size

Shadow

Radius

import { InputGroup } from '@rewind-ui/core';

function App() {
  return (
    <InputGroup>
      <InputGroup.Text>
        <MagnifyingGlass weight="duotone" />
      </InputGroup.Text>
      <InputGroup.Input placeholder={'Search...'} type="search" />
    </InputGroup>
  );
}

Import

Import the InputGroup component using the following import statement.

import { InputGroup } from '@rewind-ui/core';

Tones

The InputGroup component supports three tones: light, solid and transparent.

<View>
  <InputGroup tone="light">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Search...'} />
  </InputGroup>
  <InputGroup tone="solid">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Search...'} />
  </InputGroup>
  <InputGroup tone="transparent">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Search...'} />
  </InputGroup>
</View>

Sizes

The InputGroup component supports four size options: xs, sm, md and lg.

<View>
  <InputGroup size="xs">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Extra small...'} />
  </InputGroup>
  <InputGroup size="sm">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Small...'} />
  </InputGroup>
  <InputGroup size="md">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Medium...'} />
  </InputGroup>
  <InputGroup size="lg">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Large...'} />
  </InputGroup>
</View>

Radiuses

The InputGroup component supports the following radius options: none, sm, base, md, lg and full.

<View>
  <InputGroup radius="none">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'None...'} />
  </InputGroup>
  <InputGroup radius="sm">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Small...'} />
  </InputGroup>
  <InputGroup radius="base">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Base...'} />
  </InputGroup>
  <InputGroup radius="md">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Medium...'} />
  </InputGroup>
  <InputGroup radius="lg">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Large...'} />
  </InputGroup>
  <InputGroup radius="full">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Full...'} />
  </InputGroup>
</View>

Shadows

The InputGroup component supports the following shadow options: none, sm, base and md.

<View>
  <InputGroup shadow="none">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'None...'} />
  </InputGroup>
  <InputGroup shadow="sm">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Small...'} />
  </InputGroup>
  <InputGroup shadow="base">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Base...'} />
  </InputGroup>
  <InputGroup shadow="md">
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Medium...'} />
  </InputGroup>
</View>

Examples

Select component

An InputGroup.Select component can be added.

Select:

<View>
  <InputGroup className="w-full">
    <InputGroup.Text>
      Search:
    </InputGroup.Text>
    <InputGroup.Select>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </InputGroup.Select>
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
  </InputGroup>
</View>

Combobox component

An InputGroup.Combobox component can be added.

Search:

<View>
  <InputGroup className="w-full">
    <InputGroup.Text>Search:</InputGroup.Text>
    <InputGroup.Combobox initialValue="1">
      <InputGroup.Combobox.Option value="1" label="Item 1" />
      <InputGroup.Combobox.Option value="2" label="Item 2" />
      <InputGroup.Combobox.Option value="3" label="Item 3" />
    </InputGroup.Combobox>
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
  </InputGroup>
</View>

Text components

An InputGroup.Text component can be added on both sides.

Search:

<View>
  <InputGroup className="w-full">
    <InputGroup.Text>
      Search:
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Find user by email address...'} type="search" />
    <InputGroup.Text>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Text>
  </InputGroup>
</View>

Textarea component

An InputGroup.Textarea component can be added.

Comment:

<View>
  <InputGroup className="w-full">
    <InputGroup.Text>
      Comment:
    </InputGroup.Text>
    <InputGroup.Textarea placeholder="Enter your comment..." />
    <InputGroup.Button tone="solid">
      <Rocket weight="duotone" />
    </InputGroup.Button>
  </InputGroup>
</View>

Button component

A Button component can be added by using the InputGroup.Button component.

Search:

<View>
  <InputGroup className="w-full">
    <InputGroup.Text>
      Search:
    </InputGroup.Text>
    <InputGroup.Input placeholder={'Find user by email address...'} type="search" />
    <InputGroup.Button>
      <MagnifyingGlass weight="duotone" />
    </InputGroup.Button>
  </InputGroup>
</View>

Multiple inputs

More than one input elements can be used.

From:

To:

<View>
  <InputGroup className="w-full">
    <InputGroup.Text>
      From:
    </InputGroup.Text>
    <InputGroup.Input type="date" />
    <InputGroup.Text>
      To:
    </InputGroup.Text>
    <InputGroup.Input type="date" />
  </InputGroup>
</View>

<View>
  <InputGroup className="w-full">
    <InputGroup.Text>
      From:
    </InputGroup.Text>
    <InputGroup.Input type="date" />
    <InputGroup.Text>
      To:
    </InputGroup.Text>
    <InputGroup.Input type="date" />
  </InputGroup>
</View>

API Reference

Properties

All available properties are automatically inherited to all child components.

Prop	Type	Description	Default
radius	`InputGroupRadius`	Sets the border radius	`md`
shadow	`InputGroupShadow`	Sets the shadow size	`none`
size	`InputGroupSize`	Sets the input size	`md`
tone	`InputGroupTone`	Sets the input tone	`light`

Types

type InputGroupRadius = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'full';

type InputGroupShadow = 'none' | 'sm' | 'base' | 'md';

type InputGroupSize = 'xs' | 'sm' | 'md' | 'lg';

type InputGroupTone = 'light' | 'solid' | 'transparent';

Input Radio