Input
Components4.9.2
Input
Wrap over the input elements.
import Input from '@semcore/ui/input';
<Input />;
type
InputProps
BoxProps & NeighborItemProps & NeighborLocationProps & {...}
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 />;
type
InputValueProps
BoxProps & NeighborItemProps & WithAutoFocusEnhanceProps & {...}
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 onMouseDown
handler.
import Input from '@semcore/ui/input';
<Input.Addon />;
type
InputAddonProps
BoxProps & NeighborItemProps & {...}
Property | Description |
---|---|
interactive boolean | Adds styles for interactive icons |
disabled boolean | Blocks the addon |
size InputSize = m | Input size |