Input Group

A composable input container that supports icons, add-ons, — perfect for building search bars etc.

import { Input, InputGroup } from '@fidely-ui/react'
import { BiUser } from 'react-icons/bi'

export const InputGroupBasics = () => {
  return (
    <InputGroup startAddon={<BiUser />}>
      <Input />
    </InputGroup>
  )
}

Usage

import { InputGroup, Input } from '@fidely-ui/react'

<InputGroup>
  <Input />
</InputGroup>

End Addon

import { Input, InputGroup } from '@fidely-ui/react'
import { BiUser } from 'react-icons/bi'

export const InputGroupEndAddon = () => {
  return (
    <InputGroup endAddon={<BiUser />}>
      <Input />
    </InputGroup>
  )
}

Both Addons

https://

.com

import { Input, InputGroup } from '@fidely-ui/react'

export const InputGroupBothAddon = () => {
  return (
    <InputGroup startAddon="https://" endAddon=".com">
      <Input placeholder="www.google" />
    </InputGroup>
  )
}

Using Addon Component

When using InputGroup with InputAddon component pass the palcement props left or right default to left

24 results

import { Input, InputGroup, InputAddon } from '@fidely-ui/react'
import { BiUser } from 'react-icons/bi'

export const InputGroupCompAddon = () => {
  return (
    <InputGroup>
      <InputAddon placement={'left'}>
        <BiUser />
      </InputAddon>
      <Input placeholder="www.google" />

      <InputAddon placement={'right'}>24 results</InputAddon>
    </InputGroup>
  )
}

Styling Addon

24 results

import { Input, InputGroup, InputAddon } from '@fidely-ui/react'
import { BiUser } from 'react-icons/bi'

export const InputGroupStyleAddon = () => {
  return (
    <InputGroup>
      <InputAddon placement={'left'} bg={'bg.emphasized'}>
        <BiUser />
      </InputAddon>
      <Input placeholder="style addon" />

      <InputAddon placement={'right'} bg={'bg.emphasized'}>
        24 results
      </InputAddon>
    </InputGroup>
  )
}

Kbd

⌘K

import { Input, InputGroup, Kbd } from '@fidely-ui/react'
import { BiUser } from 'react-icons/bi'

export const InputGroupWithKbd = () => {
  return (
    <InputGroup startAddon={<BiUser />} endAddon={<Kbd>⌘K</Kbd>}>
      <Input placeholder="search dashboard..." />
    </InputGroup>
  )
}

Props

InputGroup

Prop	Default	Type	Description
`startAddon`	`-`	`React.ReactNode \| string`	start icon displayed inside the input group.
`startAddon`	—	`React.ReactNode \| string`	end icon displayed inside the input group..
`unstyled`	`false`	`boolean`	Whether to remove the component's default styling.