React
Is new design vision part implemented using new tokens?
React
Is new design vision part implemented using new tokens?
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={() => {}}
/>
)
}
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> |
|