Skip to content

Input

Components
3.5.18

Input

Wrap over the input elements.

import Input from '@semcore/ui/input';
<Input />;
interface
IInputProps extends IBoxProps, INeighborItemProps, INeighborLocationProps
PropertyDescription
disabled
boolean

Sets the input and addons to the disabled state

size

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
PropertyDescription
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

Input size

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

import Input from '@semcore/ui/input';
<Input.Addon />;
interface
IInputAddonProps extends IBoxProps, INeighborItemProps
PropertyDescription
interactive
boolean

Adds styles for interactive icons

disabled
boolean

Blocks the addon

size

Input size