@UiReact

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiInput

Package: @uireact/form

^v3.13.6

Component used to render input fields

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/form

UiInput with placeholder


  <UiInput
    placeholder="First Name"
    onChange={(value) => {
      console.log(value);
    }}
  />

UiInput with size


  <UiInput
    placeholder="First Name"
    onChange={(value) => {
      console.log(value);
    }}
    size="xlarge"
  />

UiInput with label


  <UiInput label="First Name" labelOnTop />

UiInput with icon


  <UiInput label="Search" placeholder="Type your search" labelOnTop icon={<UiIcon icon="Search" />} />

UiInput with override padding


  <UiInput label="First Name" padding={{ all: 'five' }} />

UiInput disabled


  <UiInput label="First Name" disabled />

UiInput with state


  <UiInput label="First Name" category="positive" />

UiInput with error state and error message


  <UiInput label="First Name" error="Some error" category="error" />

UiInput for passwords


  <UiInput label="Password" labelOnTop type="password" />

UiInput for numbers


  <UiInput label="Number" labelOnTop type="number" value="123" />

UiInput for datepicker

This is the browser's basic datepicker, each browser would render it the way it understand it. If you want a controlled datepicker look at the datepicker input component.


  <UiInput label="Date" labelOnTop type="date" />