Input

Components

Wrap over the input elements.

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

interface

IInputProps extends IBoxProps, INeighborItemProps, INeighborLocationProps

Property	Description
disabled `boolean`	Sets the input and addons to the disabled state
size `InputSize` = m	Input size
state `"normal" \| "invalid" \| "valid"` = normal	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 />;

interface

IInputValueProps extends IBoxProps, INeighborItemProps, IWithAutoFocusEnhanceProps

Property	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`	Sets the input to the disabled state
readOnly `boolean`	Sets the input to the read-only state
size `InputSize` = m	Input size

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 onClick handler.

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

interface

IInputAddonProps extends IBoxProps, INeighborItemProps

Property	Description
interactive `boolean`	Adds styles for interactive icons
disabled `boolean`	Blocks the addon
size `InputSize` = m	Input size