Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Input Search

v.1.0.0 | Saturn
Healthy
StorybookGithub

Field that allows the user to search from a list of options in a limited space.

import { InputSearch } from '@kubit-ui-web/react-components'
12345678910
<InputSearch
  variant="DEFAULT"
  label={{ content: 'Label' }}
  placeholder='Placeholder'
  hasResultTextWrittenByUser={false}
  disableErrorInvalidOption={true}
  optionList={[
    {
      options: ['Street 1', 'Street 2', 'Avenue 1'],
    },

The InputSearch component inherits its properties of the Input component. For more information visit the Input documentation.

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefines style for its quick use, access them through the variant prop.

12345678910
<InputSearch
  variant="DEFAULT"
  label={{ content: 'Label' }}
  placeholder='Placeholder'
  hasResultTextWrittenByUser={false}
  disableErrorInvalidOption={true}
  optionList={[
    {
      options: ['Street 1', 'Street 2', 'Avenue 1'],
    },

Error when no option selected

Through the disableErrorInvalidOption prop, you can disable the error message when no option is selected, by default it is true.

When internal errors, onInternalErrors function will be called.

12345678910
<InputSearch
  variant="DEFAULT"
  label={{ content: 'Label' }}
  placeholder="Placeholder"
  hasResultTextWrittenByUser={false}
  errorMessage={{ content: 'This field is required' }}
  errorIcon={{ icon: 'ICON_ERROR', altText: 'Alt text error' }}
  errorAriaLiveType="polite"
  optionList={[
    {

No results text

Set the noResultsText to configure the message when no results are found.

12345678910
<InputSearch
  variant="DEFAULT"
  label={{ content: 'Label' }}
  placeholder="Placeholder"
  noResultsText={{ content: 'noResultsText' }}
  hasResultTextWrittenByUser={false}
  disableErrorInvalidOption={true}
  helpMessage={{ content: 'Help message' }}
  optionList={[
    {

Icon

An icon can be added for decorative purposes and it can be customize using the prop iconPosition.

12345678910
<InputSearch
  variant="DEFAULT"
  label={{ content: 'Label' }}
  placeholder="Placeholder"
  hasResultTextWrittenByUser={false}
  icon={{ icon: 'ICON_PLACEHOLDER' }}
  iconPosition="RIGHT"
  optionList={[
    {
      options: ['Street 1', 'Street 2', 'Avenue 1'],

Elements to show

You can configure the height of the list of options through the elementsToShow prop. This prop adjusts the size for scrolling based on the number of items to be displayed

12345678910
<InputSearch
  variant="DEFAULT"
  label={{ content: 'Label' }}
  placeholder="Placeholder"
  hasResultTextWrittenByUser={false}
  disableErrorInvalidOption={true}
  elementsToShow={1}
  optionList={[
    {
      options: ['Street 1', 'Street 2', 'Avenue 1'],

Show as option text written by user

Set the hasResultTextWrittenByUser prop to show the text written by the user.

12345678910
<InputSearch
  variant="DEFAULT"
  label={{ content: 'Label' }}
  placeholder="Placeholder"
  hasResultTextWrittenByUser={true}
  disableErrorInvalidOption={true}
  noResultsText='No results found'
  optionList={[
    {
      options: ['Street 1', 'Street 2', 'Avenue 1'],
Input PhoneAccessibility
Input SearchDesign Specs