InlineInput

Wrap over the inline-input elements.

import InlineInput from '@semcore/ui/inline-input';
<InlineInput />;

InlineInputProps

& {...}

Name	Type	Description
state	"normal" | "valid" | "invalid"	Visual state of inline input
loading	boolean	Disabled input and shows spinner instead of confirm control
disabled	boolean	Disabled input and controls
onConfirm	(value: string, event: React.MouseEvent | React.FocusEvent | React.KeyboardEvent) => void	Fired with entered value when user clicks confirm control or hits `Enter` or `Space`
onCancel	(prevValue: string, event: React.MouseEvent | React.FocusEvent | React.KeyboardEvent) => void	Fired with value (or defaultValue) that was provided during component mount when user clicks cancel control or hits `Escape`
value	string	Text value of input. Should be used with `onChange` property together
defaultValue	string	Initial text value of input
autoFocus	boolean	Makes component to catch browser focus on component mount
placeholder	string	Gray text displayed in empty input
onBlurBehavior	"cancel" | "confirm" | "none"	defines callback (`onCancel` or `onConfirm`) triggered when `blur` event out of container fired Triggered after all previous macrotasks completed (internally called inside of `setTimeout`)
locale	string

InlineInput.Value

This component represents the native tag input and accepts all its properties, such as value and onChange.

import InlineInput from '@semcore/ui/inline-input';
<InlineInput.Value />;

InlineInputValueProps

& {...}

Name	Type	Description
id	string	id attribute of input tag
autoFocus	boolean	when `true`, element is focused immediately after mount
value	string	value of input tag
defaultValue	string	uncontrolled value of input tag
onChange	(value: string, event: React.ChangeEvent) => void	callback invoked on every change of input tag value
state	"normal" | "valid" | "invalid"	visual state of component
loading	boolean	shows spinner in `InlineInput.ConfirmControl` and disables other interactive elements
disabled	boolean	disables interactive elements
placeholder	string	gray text in empty input tag

InlineInput.Addon

The addon inside the container (most often it is an icon or short text) places the correct indent units depending on the size.

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 InlineInput from '@semcore/ui/inline-input';
<InlineInput.Addon />;

InlineInput.ConfirmControl

The addon with hint tooltip and icon. By default is displayed with middle-size Check icon. Addon click triggers InlineInput onConfirm callback.

When loading property is provided to InlineInput, InlineInput.ConfirmControl icon replaced with spinner.

import InlineInput from '@semcore/ui/inline-input';
<InlineInput.ConfirmControl />;

InlineInputConfirmControlProps

& {...}

Name	Type	Description
title	string	Text of tooltip
icon	React.FC	Icon component

InlineInput.CancelControl

The addon with hint tooltip and icon. By default is displayed with middle-size Close icon. Addon click triggers InlineInput onCancel callback.

import InlineInput from '@semcore/ui/inline-input';
<InlineInput.CancelControl />;

InlineInputCancelControlProps

& {...}

Name	Type	Description
title	string	Text of tooltip
icon	React.FC	Icon component