Input

Wrap over the input elements.

jsx

import Input from 'intergalactic/input';
<Input />;

import Input from 'intergalactic/input';
<Input />;

& & & {...}

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 />;

import Input from 'intergalactic/input';
<Input.Value />;

& & & {...}

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	Sets the input to the disabled state
readOnly	boolean	Sets the input to the read-only state
size		Input size

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 />;

import Input from 'intergalactic/input';
<Input.Addon />;

& & {...}

Name	Type	Description
interactive	boolean	Adds styles for interactive icons
disabled	boolean	Blocks the addon
size		Input size