Input

import { Input } from '@enmovil/ui-design-system';

A single-line text input with Enmovil sizing (middle by default) and validation states through status. It supports content before and after the field, a suffix and a clear button.

Properties

Property	Type	Required	Default	Allowed values	Description
className	string	No	—	—	Extra CSS class added to the wrapper around the input, not to the input itself.
icon	ReactNode	No	—	—	Declared, but not used by the component. It is passed on to the underlying input and no icon is shown; use suffix for an icon inside the field.
status	string	No	—	'', 'error', 'warning'	Validation state of the field: error shows the error border, warning a warning-coloured one. Without it the field has its normal border.
isSearch	boolean	No	—	—	Declared, but not used by the component. A plain input is rendered either way, with no search button.
size	string	No	'middle'	'small', 'middle', 'large'	Height of the field: small (28px), middle (34px) or large (40px). Defaults to middle.
disabled	boolean	No	—	—	Greys out the field and stops it from being focused or edited.
addonBefore	ReactNode	No	—	—	Content attached to the left of the field, outside its border, such as a label, an icon or a select.
addonAfter	ReactNode	No	—	—	Content attached to the right of the field, outside its border, such as a unit, an icon or a select.
type	string	No	—	'text', 'checkbox', 'radio', 'date', 'email', 'password'	HTML input type, for example password or email. Defaults to text.
placeholder	string	No	—	—	Text shown while the input is empty.
allowClear	boolean | { clearIcon?: ReactNode; }	No	—	—	Shows a clear icon once the field has a value. Clicking it empties the field and fires onChange and onClear.
suffix	ReactNode	No	—	—	Content shown inside the field, after the text, such as an icon.
loading	boolean	No	—	—	Not a prop of the component. It appears only in the stories' controls and has no effect on the input.
isSelectMode	boolean	No	—	—	Toggle between input and select mode

Other attributes

Input passes 308 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

Name	Signature	When it fires
onFocus	FocusEventHandler<HTMLInputElement>	Fires when the input receives focus.
onBlur	FocusEventHandler<HTMLInputElement>	Fires when the input loses focus. Use it for validate-on-blur.
onChange	ChangeEventHandler<HTMLInputElement>	Fires on every edit, including when the clear icon empties the field.
onKeyDown	KeyboardEventHandler<HTMLInputElement>	Fires on every key press, for custom shortcuts.
onClear	(() => void)	Fires when the allowClear icon is clicked.
onPressEnter	KeyboardEventHandler<HTMLInputElement>	Fires when Enter is pressed inside the input.

Children

Input does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Search Input example.

Loading playground…

Storybook

Open Input in Storybook to try every story with the full set of controls.