Welcome to the StepOne components documentation
StepOne Fundation
StepOne Modules
Searchbox
The Searchbox is a styled component that allows users to search and filter data.
Searchbox Props
| Name | Use | Type | Definition |
| id | optional | string | Indicates the ID for the search input field. |
| placeholder | optional | string | Indicates the placeholder text for the search input field. |
| name | optional | string | Indicades the name for the search input field. |
| onChange | required | (e: React.ChangeEvent<HTMLInputElement>) => void | Function that is called when the value of the input element is changed. It receives an event of type React.ChangeEvent<HTMLInputElement>. |
| onRemove | optional | () => void | Function that is called when the remove button is clicked. It doesn't receive any arguments. |
| value | optional | string | Represents the value of the input element. |
| small | optional | boolean | Specifies if the input element should have a small size. |
| disabled | optional | boolean | Indicates whether the input field is disabled or not. |
| others | optional | any | Accepts any other props that aren't defined by the ISearchboxProps interface. |
| className | optional | string | Adds a class to the searchbox. |
Examples
Default searchbox
Small searchbox
Example of small searchbox by adding small prop.
Filled searchbox
Example of searchbox with value by adding value prop.