InputSearch

The InputSearch component is a search input field that allows users to enter search queries. It provides a text input with an accompanying search icon, enabling users to perform search operations easily.

Components:

InputSearch

Type

Components

import

import { InputSearch } from '@pillar-ui/core'

Usage

import { InputSearch } from '@pillar-ui/core'
<InputSearch />

Examples

Variant

Default

outline

Type

'bordered' | 'filled' | 'outline'
import { InputSearch } from '@pillar-ui/core'

export const InputSearchVariant = () => {
  return (
    <>
      <InputSearch aria-label="hello" variant="bordered" />
      <InputSearch aria-label="hello" variant="filled" />
      <InputSearch aria-label="hello" variant="outline" />
    </>
  )
}

Corner

Default

2

Type

'0' | '1' | '2' | '3' | '4' | '5' | 'full'
import { InputSearch } from '@pillar-ui/core'

export const InputSearchCorner = () => {
  return (
    <>
      <InputSearch corner="0" />
      <InputSearch corner="1" />
      <InputSearch corner="2" />
      <InputSearch corner="3" />
      <InputSearch corner="4" />
      <InputSearch corner="5" />
      <InputSearch corner="full" />
    </>
  )
}

Color

Default

p

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'
import { InputSearch } from '@pillar-ui/core'
import { User } from '@pillar-ui/icons'

export const InputSearchColor = () => {
  return (
    <>
      <InputSearch color="p" />
      <InputSearch color="w" />
      <InputSearch color="se" />
      <InputSearch color="su" />
      <InputSearch color="b" />
      <InputSearch color="d" />
      <InputSearch color="i" />
    </>
  )
}

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
import { InputSearch } from '@pillar-ui/core'

export const InputSearchSize = () => {
  return (
    <>
      <InputSearch size="1" />
      <InputSearch size="2" />
      <InputSearch size="3" />
      <InputSearch size="4" />
      <InputSearch size="5" />
      <InputSearch size="6" />
      <InputSearch size="7" />
    </>
  )
}

Status

import { InputSearch } from '@pillar-ui/core'

export const InputSearchStatus = () => {
  return (
    <>
      <InputSearch />
      <InputSearch disabled />
      <InputSearch readOnly />
      <InputSearch isInvalid />
    </>
  )
}

Prefix

https://
import { InputSearch } from '@pillar-ui/core'
import { User } from '@pillar-ui/icons'
import React from 'react'

export const InputSearchPrefix = () => {
  return (
    <>
      <InputSearch aria-label="hello" placeholder="Placeholder" />
      <InputSearch aria-label="hello" prefixInput={<User width="16" />} placeholder="Placeholder" />
      <InputSearch aria-label="hello" prefixInput={'https://'} />
    </>
  )
}

Suffix

.com
import { Button, InputSearch } from '@pillar-ui/core'
import { User } from '@pillar-ui/icons'
import React from 'react'

export const InputSearchSuffix = () => {
  return (
    <>
      <InputSearch aria-label="hello" suffixInput={<User width="16" />} placeholder="Placeholder" />
      <InputSearch aria-label="hello" suffixInput=".com" />
    </>
  )
}

Customizing Appearance

Our design system uses CSS variables to set default styles for components. You can customize these variables to change the overall look of your component accross your project.

Available Properties:

/* Change the default corner of the Button */
--field-rad:;
/* Change the default size of the Button */
--field-size:;
/* Change the default size of the Button */
--field-transform:;