InputSearch

props

Filled

A filled input is a type of input field that has a background color. This makes it easy for users to see where they are typing and to distinguish between input fields.

export const FilledInput = () => {
  return (
    <Flex gap="sm" direction="column">
      <InputSearch aria-label="hello" autoFocus placeholder="Focus" variant="filled" />
      <InputSearch aria-label="hello" placeholder="Normal" variant="filled" />
      <InputSearch aria-label="hello" disabled placeholder="Disabled" variant="filled" />
      <InputSearch aria-label="hello" readOnly placeholder="readOnly" variant="filled" />
      <InputSearch aria-label="hello" isInvalid placeholder="Error" variant="filled" />
      <InputSearch aria-label="hello" suffixInput={<User width="16" />} placeholder="Error" variant="filled" />
      <InputSearch aria-label="hello" prefixInput={<User width="16" />} placeholder="Placeholder" variant="filled" />
      <InputSearch
        aria-label="hello"
        prefixInput={'https://'}
        suffixInput=".com"
        defaultValue="Default Value"
        variant="filled"
      />
    </Flex>
  )
}

Outline

The outline variant of the input component is a type of input field that has a border around it. This makes it easy for users to see where they are typing and to distinguish between input fields.

export const OutlineInput = () => {
  return (
    <Flex gap="sm" direction="column">
      <InputSearch variant="outline" aria-label="hello" autoFocus placeholder="Focus" variant="filled" />
      <InputSearch variant="outline" aria-label="hello" placeholder="Normal" variant="filled" />
      <InputSearch variant="outline" aria-label="hello" disabled placeholder="Disabled" variant="filled" />
      <InputSearch variant="outline" aria-label="hello" readOnly placeholder="readOnly" variant="filled" />
      <InputSearch variant="outline" aria-label="hello" isInvalid placeholder="Error" variant="filled" />
      <InputSearch
        variant="outline"
        aria-label="hello"
        suffixInput={<User width="16" />}
        placeholder="Error"
        variant="filled"
      />
      <InputSearch
        variant="outline"
        aria-label="hello"
        prefixInput={<User width="16" />}
        placeholder="Placeholder"
        variant="filled"
      />
      <InputSearch
        variant="outline"
        aria-label="hello"
        prefixInput={'https://'}
        suffixInput=".com"
        defaultValue="Default Value"
        variant="filled"
      />
    </Flex>
  )
}

Bordered

The bordered variant of the input component is a type of input field that has a bottom border that visually separates the input from others and shows the edge of the input.

export const OutlineInput = () => {
  return (
    <Flex gap="sm" direction="column">
      <InputSearch variant="bordered" aria-label="hello" autoFocus placeholder="Focus" variant="filled" />
      <InputSearch variant="bordered" aria-label="hello" placeholder="Normal" variant="filled" />
      <InputSearch variant="bordered" aria-label="hello" disabled placeholder="Disabled" variant="filled" />
      <InputSearch variant="bordered" aria-label="hello" readOnly placeholder="readOnly" variant="filled" />
      <InputSearch variant="bordered" aria-label="hello" isInvalid placeholder="Error" variant="filled" />
      <InputSearch
        variant="bordered"
        aria-label="hello"
        suffixInput={<User width="16" />}
        placeholder="Error"
        variant="filled"
      />
      <InputSearch
        variant="bordered"
        aria-label="hello"
        prefixInput={<User width="16" />}
        placeholder="Placeholder"
        variant="filled"
      />
      <InputSearch
        variant="bordered"
        aria-label="hello"
        prefixInput={'https://'}
        suffixInput=".com"
        defaultValue="Default Value"
        variant="filled"
      />
    </Flex>
  )
}

Corner

The corner prop is a prop that can be used to customize the corner radius of the Input component. Valid values for the corner prop are: sharp | xs | sm | md | lg | xl | full

export const CornerInput = () => {
  return (
    <Flex gap="sm" direction="column">
      <InputSearch corner="sharp" placeholder="sharp" />
      <InputSearch corner="xs" placeholder="xs" />
      <InputSearch corner="sm" placeholder="sm" />
      <InputSearch corner="md" placeholder="md" />
      <InputSearch corner="lg" placeholder="lg" />
      <InputSearch corner="xl" placeholder="xl" />
      <InputSearch corner="full" placeholder="full" />
    </Flex>
  )
}

Color

Type: string
Default: primary
Options: danger | warning | success | primary | bgcece | primary | secondary

The color prop can be used to customize the color of the input's border when it is focused. Valid values for the color prop are: primary | purple | secondary | brown | bgcece

export const ColorInput = () => {
  return (
    <Flex gap="sm" direction="column">
      <InputSearch color="pri" variant="bordered" autoFocus placeholder="Focus" />
      <InputSearch color="war" variant="bordered" autoFocus placeholder="Normal" />
      <InputSearch color="sec" variant="outline" autoFocus placeholder="Disabled" />
      <InputSearch color="bg" variant="filled" autoFocus placeholder="isInvalid" />
      <InputSearch
        color="suc"
        variant="bordered"
        autoFocus
        prefixInput={<User width="16" />}
        placeholder="Placeholder"
      />
      <InputSearch
        color="dan"
        variant="bordered"
        autoFocus
        prefixInput={'https://'}
        suffixInput=".com"
        defaultValue="Default Value"
      />
    </Flex>
  )
}

Size

Type: string
Default: md
Options: 2xs | xs | sm | md | lg | xl | 2xl

The size prop of the input component is used to change the size of the input field. The default size is medium md. The following values are supported: sm ,lg

import { Flex, Input } from '@pillar-ui/core'
export const SizeInput = () => {
  return (
    <Flex gap="sm" direction="column">
      <InputSearch size="sm" placeholder="Small(sm)" />
      <InputSearch placeholder="Medium (md default You don't need it)" />
      <InputSearch size="lg" placeholder="Large(lg)" />
    </Flex>
  )
}

Best Practice

Use clear and concise labels. The label should be descriptive and accurate, and it should clearly indicate what information is being requested to add label to the input Please wrap it within a FormField Component.
Use placeholder text. The placeholder text should provide a hint to the user about what information is expected.
Use a consistent style for all input fields. This will help to create a more visually appealing and user-friendly interface. Choose only one variant and use it consistently throughout your site. Do not mix variants within the same site.
Validate the input data on both the client and server side. This will help to ensure that the user enters the correct information and provide a good user experience.
Provide feedback to the user about the validity of their input data. Use FormController to send error messages to the component, which will then display them to the user.
If your input field needs more information, use the hint prop to provide that information to the user. This will help the user to understand what information is expected and to enter the correct information.

Troubleshooting

If you encounter any issues with the InputSearch component, make sure that you have correctly passed the props and event handlers. If you are still having issues, check the console for any error

Conclusion

The InputSearch component provides a convenient and user-friendly way to implement search functionality in your application. With its customizable props, such as placeholder, value, and size, you can tailor the search input field to fit your design and user experience requirements.

Pillar UI React InputSearch Component documentation