Input

Components

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 `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 `InputSize` = m	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.

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