Input

Bundle size

The Input component in UI refers to an interactive element that allows users to enter and submit data, such as text or numbers, into a form or interface. It is commonly used to collect user input, ranging from simple text messages to more complex data like dates or passwords.

Controlled

This is a hint text to help user.

"use client";

import React from "react";
import * as Input from "@lora-ui/input";

export default function Controlled() {
  const [value, setValue] = React.useState("");

  function handleChange(value) {
    setValue(value);
  }

  return (
    <div className="mx-auto w-[328px]">
      <label
        htmlFor="input-1"
        className="text-sm font-medium text-[#344054] dark:text-[#cecfd2]"
      >
        Email
      </label>
      <Input.Root
        id="input-1"
        placeholder="Email"
        type="email"
        autoComplete="off"
        value={value}
        onValueChange={handleChange}
        className="border-box my-[6px] h-[44px] w-[328px] rounded-lg border border-[#d0d5dd] bg-[#ffffff] pl-2 text-[#101828] placeholder:text-base placeholder:font-normal placeholder:text-[#40444c] disabled:cursor-not-allowed disabled:border-[#d0d5dd] disabled:bg-[#f9fafb] disabled:text-[#667085] dark:border-[#333741] dark:bg-[#0c111d] dark:text-[#f5f5f6] dark:placeholder:text-[#94969c] dark:disabled:border-[#333741] dark:disabled:bg-[#161b26]"
      />
      <div className="text-sm font-normal text-[#475467] dark:text-[#94969c]">
        This is a hint text to help user.
      </div>
    </div>
  );
}

Uncontrolled

This is a hint text to help user.

"use client";

import * as Input from "@lora-ui/input";

export default function Uncontrolled() {
  return (
    <div className="mx-auto w-[328px]">
      <label
        htmlFor="input-1"
        className="text-sm font-medium text-[#344054] dark:text-[#cecfd2]"
      >
        Email
      </label>
      <Input.Root
        id="input-1"
        placeholder="Email"
        type="email"
        autoComplete="off"
        defaultValue=""
        className="border-box my-[6px] h-[44px] w-[328px] rounded-lg border border-[#d0d5dd] bg-[#ffffff] pl-2 text-[#101828] placeholder:text-base placeholder:font-normal placeholder:text-[#40444c] disabled:cursor-not-allowed disabled:border-[#d0d5dd] disabled:bg-[#f9fafb] disabled:text-[#667085] dark:border-[#333741] dark:bg-[#0c111d] dark:text-[#f5f5f6] dark:placeholder:text-[#94969c] dark:disabled:border-[#333741] dark:disabled:bg-[#161b26]"
      />
      <div className="text-sm font-normal text-[#475467] dark:text-[#94969c]">
        This is a hint text to help user.
      </div>
    </div>
  );
}

Installation

Install the component from your command line.

npm install @lora-ui/input

API Reference

Root

Prop	Type	Default	Explanation
isDisabled	Boolean	false
isRequired	Boolean	false
onValueChange	ChangeEvent	(value) => { }
type	String	"text" \| "email" \| "password" \| "number"	"text"

Keyboard

Command	Description
Tab	Move focus to the next focusable element
Shift+Tab	Move focus to the previous focusable element

Other

All relevant ARIA attributes are automatically managed.