upn-input-patient v2.0.9

Input Component Style Guide

This document provides guidelines and usage examples for the Input component.

Importing the Badge Component

First, import the upn-input-patient component into your React component:

import Input from 'upn-input-patient';

Global Props

• type: Specifies the type of the input element. It could be text, file etc. (default: text).
• value: The current value of the input element.
• props: Additional properties to pass to the input element.
• iconProps: Additional properties to pass to the icon component.
• labelText: Text for the input label.
• className: CSS class to apply to the input element.
• InputIcon: An icon to display inside the input.
• placeholder: Placeholder text for the input.
• fileIconClassName: CSS class to apply to the file icon.
• inputIconClassName: CSS class to apply to the input icon.
• wrapperLabelClassName: CSS class to apply to the label wrapper.

file Input Props

• FileIcon: An icon to display for file type inputs.
• beforeText: Text to display before the input.
• afterText: Text to display after the input.

dropdown Input Props

• onSelect: A function to be called when an option is selected (for select type inputs).
• options: If the input type is select, this could be an array of options for the dropdown.

date Input Props

• selectedDate: The currently selected date (for date type inputs).
• setSelectedDate: A function to update the selected date (for date type inputs).

textarea Input Props

• textAreaProps: Additional properties to pass to the textarea (if the input type is textarea).

Usage

Text Input

import Input from 'upn-input-patient';
import React, { useState } from 'react';

const [name, setName] = useState('');
function handleInputChange(event) {
  setName(event.target.value);
}
<Input
  labelText="Name"
  placeholder="Enter Name"
  props={{
    value: name,
    onChange: handleInputChange,
  }}
/>;

Tel Input

import Input from 'upn-input-patient';
import React, { useState } from 'react';

const [contact, setContact] = useState('+977 ');
function handleContactChange(event: React.ChangeEvent<HTMLInputElement>) {
  let value = event.target.value;
  value = value.replace(/\D/g, '');
  if (!value.startsWith('+977 ')) setContact('+977 ' + value.slice(3));
  else setContact(value);
}
<Input
  type="tel"
  labelText="Contact"
  placeholder="Enter Contact Number"
  props={{
    value: contact,
    onChange: handleContactChange,
    pattern: '\\+977-[0-9]{10}',
    size: 15,
    maxLength: 15,
  }}
/>;

Password Input

import Input from 'upn-input-patient';
import React, { useState } from 'react';
import { EyeOnIcon, EyeOffIcon } from 'upn-icon';

const [password, setPassword] = useState('');
const [inputType, setInputType] = useState('password');
const [passwordVisible, setPasswordVisible] = useState(false);
function handlePasswordChange(event: React.ChangeEvent<HTMLInputElement>) {
  setPassword(event.target.value);
}
function handlePasswordVisibility() {
  setPasswordVisible(function (passwordVisible) {
    !passwordVisible;
  });
  setInputType(function (inputType) {
    inputType === 'password' ? 'text' : 'password';
  });
}
<Input
  type={inputType}
  InputIcon={passwordVisible ? EyeOnIcon : EyeOffIcon}
  placeholder="Enter Password"
  labelText="Password"
  props={{
    value: password,
    onChange: handlePasswordChange,
  }}
  iconProps={{
    onClick: handlePasswordVisibility,
  }}
/>;
<Input
  type={inputType}
  InputIcon={passwordVisible ? EyeOnIcon : EyeOffIcon}
  placeholder="Enter Password"
  labelText="Password"
  className="error"
  props={{
    value: password,
    onChange: handlePasswordChange,
  }}
  iconProps={{
    onClick: handlePasswordVisibility,
  }}
/>;

Textarea

import Input from 'upn-input-patient';
import React, { useState } from 'react';

const [textArea, setTextArea] = useState('');
function handleTextAreaChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
  setTextArea(event.target.value);
}
<Input
  type="textarea"
  labelText="Message"
  placeholder="Write your message here"
  textAreaProps={{
    value: textArea,
    onChange: handleTextAreaChange,
  }}
/>;

Checkbox

import Input from 'upn-input-patient';
import React, { useState } from 'react';

const [checked, setChecked] = useState(false);
function handleCheckboxChange(event: React.ChangeEvent<HTMLInputElement>) {
  setChecked(event.target.checked);
}
<Input
  type="checkbox"
  labelText="Agree"
  props={{
    checked,
    onChange: handleCheckboxChange,
  }}
/>;

Radio

import Input from 'upn-input-patient';
import React, { useState } from 'react';

const [gender, setGender] = useState('');
function handleGenderChange(event: React.ChangeEvent<HTMLInputElement>) {
  setGender(event.target.value);
}
<Input
  type="radio"
  labelText="Male"
  props={{
    name: 'gender',
    value: 'male',
    checked: gender === 'male',
    onChange: handleGenderChange,
  }}
/>;

Toggle

import Input from 'upn-input-patient';
import React, { useState } from 'react';

const [toggle, setToggle] = useState(false);
function handleToggleChange(event: React.ChangeEvent<HTMLInputElement>) {
  setToggle(event.target.checked);
}
<Input
  type="toggle"
  labelText="ON / OFF"
  props={{
    checked: toggle,
    onChange: handleToggleChange,
  }}
/>;

File

import Input from 'upn-input-patient';
import React, { useState } from 'react';
import { AttachmentIcon } from 'upn-icon';

const [file, setFile] = useState<File | null>(null);
function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
  if (event.target.files && event.target.files.length) setFile(event.target.files[0]);
}
<Input
  type="file"
  FileIcon={AttachmentIcon}
  props={{
    onChange: handleFileChange,
  }}
  labelText="Add File"
/>;

Date

import Input from 'upn-input-patient';
import React, { useState } from 'react';

const [date, setDate] = useState(new Date());
<Input type="date" labelText="Date" selectedDate={date} setSelectedDate={setDate} />;

Dropdown

import Input from 'upn-input-patient';
import React, { useState } from 'react';

const [selectedOption, setSelectedOption] = useState<string | null>(''); // or null if no option is selected
const options = ['Dropdown 1', 'Dropdown 2', 'Dropdown 3'];
function onSelect(selectedOption: string) {
  setSelectedOption(selectedOption);
}
<Input
  type="dropdown"
  labelText="Choose Option"
  options={options}
  value={selectedOption}
  onSelect={onSelect}
/>;