Search Input

 

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example

Storybook failed to load. Please connect to the VPN to access.

                                                        
                                                        
                                                            import { useState } from 'react';
                                                        import { InputValue, SearchInput } from '@optimus-web/core';
                                                        
                                                        const SearchInputComponent = () => {
                                                                const [inputValue, setInputValue] = useState<InputValue>('');
                                                        
                                                                return (
                                                                    <SearchInput
                                                                        value={inputValue}
                                                                        onChange={(_event: ChangeEvent<HTMLInputElement> | MouseEvent, value: InputValue) =>
                                                                            setInputValue(value)
                                                                        }
                                                                        name="search"
                                                                        helper="Helper"
                                                                        label="Label"
                                                                        placeholder="Search"
                                                                        onSearch={() => {}}
                                                                    />
                                                                )
                                                        }
                                                        
                                                            

API

Name

Description

Type

Default

alignRight?

Aligns text inside the input to the left or right

boolean

 

captionIconWithTooltip?

Adds and Icon that is wrapped with a tooltip that contains text

ReactNode

 

clearable?

Adds an x icon inside the input to the right so the user can click on it and delete all text inside the input

boolean

 

disabled?

Allows the input to be disabled

boolean

 

error?

Enables to add an error to the bottom of the Input (or inside if you have inlined set to true)

React.ReactNode

 

helper?

Helper text that shows on the bottom left of the Input

string

 

indicativeIcon?

Use IconName from @optimus-web/icons to add an icon inside the button

IconName

 

inline?

Removes the label, caption, error, and helper when set to true

boolean

 

interactiveIcon?

Use IconName from @optimus-web/icons to add an icon inside the button

IconName

 

label?

Text that descibes what your Input needs and used as the label attribute

string

 

loading?

Shows a spinner inside the text input

boolean

 

maxCharacterCount?

Shows the maximum amount of characters you want an Input to contain (if inline or readOnly are true, maxCharacterCount will be hidden)

number

 

name

Name associated with label and used as the name and id of the input

string

 

placeholder?

Placeholder text

React.ReactNode

 

prefix?

Shown before the placeholder text inside the input

React.ReactNode

 

readOnly?

Gives the input a readOnly attribute and state

boolean

 

required?

Gives the input an * an makes it required for the user

boolean

 

size?

"small", "medium", "large", "extraLarge"

Size

 

suffix?

Shown after the placeholder text inside the input

React.ReactNode

 

value?

Text value that is set or to be retrieved from the inputs value

string

 

onSearch

Defines the action to take when the search is triggered

(value: string) => void

 

selectedLabel?

Label for the currently selected item in the search input

string

 

forwardedRef?

Allows a parent component to pass a ref down to the SearchInput component

ForwardedRef<HTMLInputElement>