Input

General

Input
Through mouse or keyboard input content, it is the most basic form field wrapper.

Title

disabled

number

left/right icon

Show Code

import React from "react"; 
import Input from "pocko-ui/Input";
 
const inputFocusRef = useRef(null);
 
return (
  <div className="mt-4">
    <Input label="Title" wrapperClassName="mb-1" />
 
    <Input label="disabled" defaultValue={"disabled"} wrapperClassName="mb-1" disabled />
 
    <Input label="number" type="number" wrapperClassName="mb-1" />
 
    <Input
      inputRef={inputFocusRef}
      label={
        <>
          <button
            className="btn btn-sm btn-primary"
            onClick={() => {
              if (inputFocusRef.current) inputFocusRef.current.focus();
            }}
          >
            ref focus
          </button>
        </>
      }
      iconLeft={<i className="fa-solid fa-left-long"></i>}
      iconRight={<i className="fa-solid fa-right-long"></i>}
      wrapperClassName="mb-1"
    />
  </div>
);

No spacing

Show Code

import React from "react"; 
import Input from "pocko-ui/Input";
 
return (
  <div className="mt-4">
    <Input defaultValue={'no-spacing'} wrapperClassName="" />
 
    <Input defaultValue={'no-spacing'} wrapperClassName="position-relative" />
  </div>
);

Date or DateTime

Date

DateTime

Time

Show Code

import React from "react"; 
import Input from "pocko-ui/Input";
 
return (
  <div className="mt-4">
    <Input label="Date" type="date" wrapperClassName="mb-2" />
 
    <Input label='DateTime' type="datetime-local" wrapperClassName="mb-2" />
 
    <Input label="Time" type="time" wrapperClassName="mb-2" />
  </div>
);

Keyboard Control

Ctrl Pressed

Show Code

import React from "react"; 
import Input from "pocko-ui/Input";
 
return (
  <div className="mt-4">
    <Input
      label="Ctrl Pressed"
      type="text"
      onPressEnter={(item: any) => {
        if (item.key == "Control") {
          alert("Ctrl pressed!");
        }
      }}
    />
  </div>
);

API

Input

import Input from 'pocko-ui/Input';

Property	Type	Default	Description	Required
`inputRef`	any	-	A ref object that allows external components to programmatically focus the input field.	-
`id`	string	-	The unique identifier for the `input` field. This is used to target the element in forms or labels.	-
`name`	string	-	The name associated with the `input` field. It is used to reference form data after form submission.	-
`size`	string \| number	-	Defines the width of the `input` field. Can be a string (e.g., `'small'`, `'large'`) or a number (e.g., `100` for pixel value).	-
`label`	string \| React.ReactNode	-	The label to be displayed for the `input` field. Can be a string or React component.	-
`labelClassName`	string	-	The class name for the `label` element. Used to style the label of the `input` field.	-
`wrapperClassName`	string	-	The class name for the outer wrapper of the `input` field.	-
`controlGroupWrapperClassName`	string	-	The class name for the input group wrapper.	-
`controlGroupTextClassName`	string	-	The class name for the input group text.	-
`iconLeft`	React.ReactNode \| string	-	The icon or content to be displayed on the left side of the `input` field.	-
`iconRight`	React.ReactNode \| string	-	The icon or content to be displayed on the right side of the `input` field.	-
`controlClassName`	string	-	The class name for the `input` element itself.	-
`type`	string	"text"	The type of the `input` field, such as `'text'`, `'password'`, or `'email'`.	-
`disabled`	boolean	-	Whether the `input` is disabled or not.	-
`readonly`	boolean	-	Whether the `input` is read-only or not.	-
`required`	boolean	-	Whether the `input` is required.	-
`requiredLabel`	string \| any	-	The label or message to be shown when the `input` is required.	-
`defaultValue`	string \| any	-	The initial value of the `input` field.	-
`placeholder`	string	-	The placeholder text to be displayed in the `input` field.	-
`autoComplete`	"on" \| "off"	"on"	Whether the `input` field allows autocomplete. The default is "on".	-
`min`	number	-	The minimum value for `input[type="number"]`.	-
`max`	number	-	The maximum value for `input[type="number"]`.	-
`step`	number	-	The step increment for `input[type="number"]`.	-
`onChange`	(value: string) => void	-	The callback function to be triggered when the value of the `input` field changes.	-
`onBlur`	() => void	-	The callback function to be triggered when the `input` field loses focus.	-
`onFocus`	() => void	-	The callback function to be triggered when the `input` field gains focus.	-
`onPressEnter`	Function \| any	-	The callback function to be triggered when the Enter key is pressed in the `input` field.	-

Installation