Skip to content

Input

Components4.9.2

Input

Wrap over the input elements.

import Input from '@semcore/ui/input';
<Input />;
typeInputProps
BoxProps & NeighborItemProps & NeighborLocationProps & {...}
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 />;
typeInputValueProps
BoxProps & NeighborItemProps & WithAutoFocusEnhanceProps & {...}
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 onMouseDown handler.

import Input from '@semcore/ui/input';
<Input.Addon />;
typeInputAddonProps
BoxProps & NeighborItemProps & {...}
PropertyDescription
interactive
boolean

Adds styles for interactive icons

disabled
boolean

Blocks the addon

size

Input size