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:;