Input
Input
Wrap over the input elements.
jsx
import Input from 'intergalactic/input';
<Input />;
InputProps
& & & {...}Name | Type | Description |
---|---|---|
disabled | boolean | Sets the input and addons to the disabled state |
size | Input size | |
state | "normal" | "invalid" | "valid" | Sets the input state |
Input.Value
This component represents the native tag
input
and accepts all its properties, such as value
and onChange
.
jsx
import Input from 'intergalactic/input';
<Input.Value />;
InputValueProps
& & & {...}Name | Type | 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 | Deprecated |
readOnly | boolean | Sets the input to the read-only state |
size | Input size | |
placeholder | string | Placeholder for input |
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.
jsx
import Input from 'intergalactic/input';
<Input.Addon />;
InputAddonProps
& & {...}Name | Type | Description |
---|---|---|
interactive | boolean | Adds styles for interactive icons |
disabled | boolean | Blocks the addon |
size | Input size |