Ui.Input

A basic component for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.

Interactive Demo

You can play around with a Ui.Input below using the controls.

Placeholder
Value
Icon
Rocket
Icon Interactive
Disabled
Invalid
Size (16px)
<Ui.Input
placeholder="Placeholder..."
icon={Ui.Icons:ROCKET}
iconInteractive={false}
size={Ui.Size.Px(16)}
disabled={false}
invalid={false}/>
Value

The value can be controlled with the value property.

<Ui.Input value="john@doe.com"/>
Placeholder

The placeholder can be changed with the placeholder property.

<Ui.Input placeholder="Enter email address..."/>
Size

The size of the component can be set with the size property (in pixels).

<>
<Ui.Input size={Ui.Size.Px(12)} value="Size: 12px"/>
<Ui.Input size={Ui.Size.Px(16)} value="Size: 16px"/>
<Ui.Input size={Ui.Size.Px(20)} value="Size: 20px"/>
</>
Input Delay

In some situations it is required to delay the change event so it only fires when the value is settled.

The delay duration can be controlled with the inputDelay property.

If an input delay is specified the component is semi-controlled, meaning that during the typing its value can change but it will revert back to the given value once the typing is settled.
<>
<Ui.Input
onChange={(value : String) { Ui.Notifications.notifyDefault(<>value</>) }}
placeholder="200ms delay..."
inputDelay={200}
/>
<Ui.Input
onChange={(value : String) { Ui.Notifications.notifyDefault(<>value</>) }}
placeholder="1000ms delay..."
inputDelay={1000}
/>
</>
Icon

An icon can be displayed in the right side of the input.

This icon is usually used to indicate something and / or have an action:

  • An eye icon can indicate an action to how the password
  • A close icon can indicate to clear the input
<>
<Ui.Input
iconInteractive={true}
icon={Ui.Icons.X}
value="John Doe"
onIconClick={
(event : Html.Event) {
Ui.Notifications.notifyDefault(<>"Icon Clicked!"</>)
}
}
/>
<Ui.Input
iconInteractive={true}
icon={Ui.Icons.EYE}
value="*****"
onIconClick={
(event : Html.Event) {
Ui.Notifications.notifyDefault(<>"Icon Clicked!"</>)
}
}
/>
</>
Disabled

The component can be disabled using the disabled property.

<Ui.Input value="John Doe" disabled={true}/>
Invalid

The component can be marked invalid using the invalid property.

<Ui.Input value="John Doe" invalid={true}/>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.