SearchInput
A search input type component.
Props#
The SearchInput composes the Input component, so you can use all the Input props.
| Prop | Type | Default | Description |
|---|---|---|---|
| colorScheme | "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | "primary" | "secondary" | "indigo" | The visual color appearance of the component | |
| errorBorderColor | string | The border color when the input is invalid. Use color keys in `theme.colors` | |
| focusBorderColor | string | The border color when the input is focused. Use color keys in `theme.colors` | |
| htmlSize | number | The native HTML size attribute to be passed to the input | |
| icon | ReactElement<any, string | JSXElementConstructor<any>> | The icon to render before the input text | |
| isDisabled | boolean | false | If true, the form control will be disabled. This has 2 side effects:
- The FormLabel will have `data-disabled` attribute
- The form element (e.g, Input) will be disabled |
| isInvalid | boolean | false | If true, the form control will be invalid. This has 2 side effects:
- The FormLabel and FormErrorIcon will have `data-invalid` set to true
- The form element (e.g, Input) will have `aria-invalid` set to true |
| isReadOnly | boolean | false | If true, the form control will be readonly |
| isRequired | boolean | false | If true, the form control will be required. This has 2 side effects:
- The FormLabel will show a required indicator
- The form element (e.g, Input) will have `aria-required` set to true |
| onReset | () => void | Callback to trigger when the reset button is clicked or escape key is pressed | |
| placeholder | string | Search | The placeholder text for the input |
| resetIcon | ReactElement<any, string | JSXElementConstructor<any>> | The icon to render in the reset button | |
| rightElement | ReactElement<any, string | JSXElementConstructor<any>> | Right element rendered when the value is empty | |
| size | "sm" | "lg" | The size of the SearchInput | |
| variant | string | The variant of the SearchInput |
| Prop | Type | Default | Description |
|---|---|---|---|
| colorScheme | "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | The visual color appearance of the component | |
| errorBorderColor | string | The border color when the input is invalid. Use color keys in `theme.colors` | |
| focusBorderColor | string | The border color when the input is focused. Use color keys in `theme.colors` | |
| htmlSize | number | The native HTML size attribute to be passed to the input | |
| isDisabled | boolean | false | If true, the form control will be disabled. This has 2 side effects:
- The FormLabel will have `data-disabled` attribute
- The form element (e.g, Input) will be disabled |
| isInvalid | boolean | false | If true, the form control will be invalid. This has 2 side effects:
- The FormLabel and FormErrorIcon will have `data-invalid` set to true
- The form element (e.g, Input) will have `aria-invalid` set to true |
| isReadOnly | boolean | false | If true, the form control will be readonly |
| isRequired | boolean | false | If true, the form control will be required. This has 2 side effects:
- The FormLabel will show a required indicator
- The form element (e.g, Input) will have `aria-required` set to true |
| size | "lg" | "md" | "sm" | "xs" | md | The size of the Input |
| variant | "outline" | "filled" | "flushed" | "unstyled" | outline | The variant of the Input |
Was this helpful?