Input

Description

the input tag is used to create both input and interactive controls for web-based forms.

States

Default

<Input placeholder="enter your input" size="large" />

Disabled

<Input placeholder="enter your input" state="disabled" size="large" />

Error

please enter this field

<Input placeholder="enter your input" state="error" size="large" />

Success

please enter this field

<Input placeholder="enter your input" state="succeess" size="large" />

Input Types

Text (default)

<Input placeholder="enter your input" size="large" />

Password

<Input
  type="password"
  value="1234"
  placeholder="enter your input"
  size="large"
/>

Email

Do we use the basic browser validation for email ?

Example : contact@phpreaction.com

Example in legacy UI : Input Email

Can we have a mask ?

Ex : ____@____.____
Beware it could be test.test1@test.test.qc.can

Have a custom components to output email.

Must be clicable ex : mailto:contact@phpreaction.com

Phone number Tel

Do we use the basic browser validation for tel ?

North American (opens in a new tab)

Example : 4507765575
Example : 450-776-5575
Example : (450) 776-5575
Example : +1 (450) 776-5575
Example : +14507765575
Example : +1 4507765575
Example : 4507765575 #202 *Add and extension 202

Internationnal (opens in a new tab)

Example : +44 2038680831
Example : +44 20 38 68 08 31
Example : +44 2038680831 #202 *Add and extension 202

Mask Phone

Add a mask to an input

What the configuration format ? Example ?

Currently : ___-___-____ _______
Ex : (___) ___-____ (north americ)
Internationnal : +__ ... (to validate)
How to swich between format

Have a custom components to output phone number.

Must be clicable ex : tel:+15146610105

Example in legacy UI : Input mask phone empty

Link / URL

URL must start by HTTP or HTTPS

Example : http://phpreaction.com (opens in a new tab)
Example : https://phpreaction.com (opens in a new tab)
Example : https://phpreaction.com/ (opens in a new tab)
Example : https://phpreaction.com/#logiciels (opens in a new tab)
Example : https://phpreaction.com/contactez-nous/ (opens in a new tab)
Example : https://demo.phpreaction.com/login (opens in a new tab)

Can we have a mask ? (not

Ex : https://___.___/___

Usage if a user start type it should add "HTTP" prefix automaticly

Maybe test later if it's an HTTP ou HTTPS ?
Validated accessibility (feature)

Have a custom components to output link.

Must be clicable ex : https://phpreaction.com

Input Hour

Example in legacy UI : Input Hours

Code soon

Input Currency

Example in legacy UI : Currency Input

Code soon

Color picker

Example in legacy UI : Color Picker

Date picker

<Input type="date" placeholder="enter your input" size="large" />

Add some print-screen example into multiple browsers

Time picker

<Input type="time" placeholder="enter your input" size="large" />

Add some print-screen example into multiple browsers

DateTime picker

Evalution

Custom validation

Special format validation

Evalution ?

With Labels

<Input
  label="Email"
  placeholder="enter your input"
  state="default"
  size="large"
  icon={MailIcon}
  iconPosition="left"
/>

With Icons

Leading Icon

<Input
  placeholder="enter your input"
  state="default"
  size="large"
  icon={MailIcon}
  iconPosition="left"
/>

Trailing Icon

<Input
  placeholder="enter your input"
  state="default"
  size="large"
  icon={MailIcon}
  iconPosition="left"
/>

With Message

Email is required!

<Input
  message="Email is required!"
  state="default"
  size="large"
  icon={MailIcon}
  iconPosition="left"
/>

Sizes

Use Default sizing

<Input size="xlarge"  state="default" size="large"icon={MailIcon} iconPosition="left" />
<Input size="large"  state="default" size="large"icon={MailIcon} iconPosition="left" />
<Input size="medium"  state="default" size="large"icon={MailIcon} iconPosition="left" />
<Input size="small"  state="default" size="large"icon={MailIcon} iconPosition="left" />
<Input size="xsmall"  state="default" size="large"icon={MailIcon} iconPosition="left" />

Automated tests

Unit

Command : npm run test:unit
Test file location : /tests/input.unit.test.tsx

npm run test:unit:file input

Integration

Command : ???
Test file location : ???

???

Form Select