Input

Wrap over the input elements.

import Input from '@semcore/ui/input';
<Input />;

InputProps

& & & {...}

Name	Type	Description
disabled	boolean	Sets the input and addons to the disabled state
size		Input size
state	"normal" | "invalid" | "valid"	Sets the input state

Input.Value

This component represents the native tag input and accepts all its properties, such as value and onChange.

import Input from '@semcore/ui/input';
<Input.Value />;

InputValueProps

& & & {...}

Name	Type	Description
value	string	Input value
defaultValue	string	Default value if `value` property is not provided
onChange	(value: string, event: React.SyntheticEvent<>) => void	Handler for changing the value
disabled	boolean	Deprecated
readOnly	boolean	Sets the input to the read-only state
size		Input size
placeholder	string	Placeholder for input

Input.Addon

The addon inside the input (most often it is an icon) places the correct indent units depending on the size. The addon can be interactive.

When you click on Addon, the focus shifts to the input. You can cancel this by returning the return false in the onMouseDown handler.

import Input from '@semcore/ui/input';
<Input.Addon />;

InputAddonProps

& & {...}

Name	Type	Description
interactive	boolean	Adds styles for interactive icons
disabled	boolean	Blocks the addon
size		Input size