Input
Components3.5.18
Input
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 |
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 |
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
Property | Description |
---|---|
interactive boolean | Adds styles for interactive icons |
disabled boolean | Blocks the addon |
size InputSize = m | Input size |