Skip to main content

InputField Component

The <InputField> component is a versatile React component that provides various styling and functional options for text input fields. It supports icons, validation states, and different input styles.

Basic Usage​

All of the React.CSSProperties are valid props with the benefit of passing just the number without unit (px are used by default). The library extends the CSS properties and adds all of them with Hover suffix that will take effect only when the component is hovered by the device pointer.

import { InputField } from "react-better-html";

function App() {
   return (
      <InputField
         label="Username"
         placeholder="Enter your username"
      />
   );
}

Common Props​

All standard <input> attributes are valid props for this component.

import { InputField } from "react-better-html";

function App() {
   return (
      <InputField
         label="Username"
         placeholder="Enter your username"
         required
         disabled
         maxLength={50}
         onChange={(event) => {
            console.log("Input value:", event.target.value);
         }}
      />
   );
}

Value change​

The library provides a new onChange event called onChangeValue that is of type (value: string) => void.

import { InputField } from "react-better-html";

function App() {
   return (
      <InputField
         label="Username"
         placeholder="Enter your username"
         onChangeValue={(value) => {
            console.log("Input value:", value);
         }}
      />
   );
}
note

Keep in mind that onChange and onChangeValue will both fire if passed.

Icons​

The component supports both left and right icons:

  • leftIcon - Icon name to display on the left side of the input
  • rightIcon - Icon name to display on the right side of the input
  • onClickRightIcon - Callback function when the right icon is clicked
import { InputField } from "react-better-html";

function App() {
   return (
      <InputField
         label="Username"
         placeholder="Username..."
         leftIcon="user"
         rightIcon="XMark"
         onClickRightIcon={() => {
            console.log("Right icon clicked");
         }}
      />
   );
}

Validation States​

The component supports various validation states:

  • errorText - Text to display when there's an error
  • infoText - Text to display as additional information
  • required - Whether the field is required or not
import { InputField } from "react-better-html";

function App() {
   return (
      <InputField
         label="Username"
         placeholder="Enter your username"
         required
         errorText="Please enter a valid username"
      />
   );
}

With Debounce​

The prop withDebounce is required to turn on that feature. When true, the onChangeValue event will be called with a delay (debounce). You can change the delay by passing the debounceDelay prop. The default value for it is 0.5s and it works for the most part.

import { InputField } from "react-better-html";

function App() {
   return (
      <InputField
         label="Address"
         placeholder="Enter your address"
         withDebounce
         onChangeValue={(value) => {
            console.log("Searched address:", value); // Will fire ones after the user stops typing
         }}
      />
   );
}

Subcomponents​

A number of components in the library have a subcomponent feature witch is like a preset of the same component that is frequently used.

InputField.multiline​

This component renders a <textarea> component instead of <input>.

import { InputField } from "react-better-html";

function App() {
   return (
      <InputField.multiline label="Description" placeholder="Enter your description" />
   );
}

InputField.email​

This component renders a ready for email input field with placeholder and auto-fills.

import { InputField } from "react-better-html";

function App() {
   return (
      <InputField.email
         onChangeValue={(value) => {
            console.log("email:", value);
         }}
      />
   );
}

InputField.password​

This component renders a ready for password input field with placeholder and auto-fills. It includes an eye button for unhiding the text.

import { InputField } from "react-better-html";

function App() {
   return (
      <InputField.password
         onChangeValue={(value) => {
            console.log("password:", value);
         }}
      />
   );
}

InputField.search​

This component renders a ready for search input field with placeholder and auto-fills. It includes an icon to indicate the search functionality.

import { InputField } from "react-better-html";

function App() {
   return (
      <InputField.search
         onChangeValue={(value) => {
            console.log("Search value:", value);
         }}
      />
   );
}

InputField.phoneNumber​

This component renders an input field with dropdown to pick the country code. Local country code is preselected by default.

import { InputField } from "react-better-html";

function App() {
   return (
      <InputField.phoneNumber
         onChangeValue={(value) => {
            console.log("Ready phone number:", value);
         }}
      />
   );
}

InputField.date​

This component renders an input field with calendar to pick a date.

import { InputField } from "react-better-html";

function App() {
   return (
      <InputField.date
         onChangeValue={(value) => {
            console.log("Ready date:", value);
         }}
      />
   );
}

InputField.time​

This component renders an input field with time picker to pick a time.

import { InputField } from "react-better-html";

function App() {
   return (
      <InputField.time
         onChangeValue={(value) => {
            console.log("Ready time:", value);
         }}
      />
   );
}

InputField.dateTime​

This component renders an input field with calendar and time picker to pick a date and time.

import { InputField } from "react-better-html";

function App() {
   return (
      <InputField.dateTime
         onChangeValue={(value) => {
            console.log("Ready date and time:", value);
         }}
      />
   );
}

InputField.color​

This component renders an input field with color picker to pick a color.

import { InputField } from "react-better-html";

function App() {
   return (
      <InputField.color
         onChangeValue={(value) => {
            console.log("Ready color:", value);
         }}
      />
   );
}