Components

Input

Installation

NPM packages are currently unstable and may cause issues. Use it at your own risk.

npm install @mijn-ui/react-input

Example Usage

  <Input className="w-80" placeholder="Username..." />

Input with Icon

import { Input } from "@mijn-ui/react-input"
import { LuPlus } from "react-icons/lu"
 
const InputWithIcon = () => {
  return (
    <div className="flex flex-col gap-4">
      {/* start Icon */}
      <Input
        className="w-80"
        placeholder="Username..."
        startIcon={<LuPlus />}
      />
 
      {/* end Icon */}
      <Input className="w-80" endIcon={<LuPlus />} placeholder="Username..." />
 
      {/* both Icon */}
      <Input
        className="w-80"
        endIcon={<LuPlus />}
        placeholder="Username..."
        startIcon={<LuPlus />}
      />
    </div>
  )
}
 
export default InputWithIcon

Input With Floating Label

<Input className="w-80" label="Username" />

Input Floating Label with Icon

import { Input } from "@mijn-ui/react-input"
import { LuPlus } from "react-icons/lu"
 
const InputWithFloatingLabelIcon = () => {
  return (
    <div className="flex flex-col gap-4">
      {/* start Icon */}
      <Input className="w-80" label="Username" startIcon={<LuPlus />} />
 
      {/* end Icon */}
      <Input className="w-80" endIcon={<LuPlus />} label="Username" />
 
      {/* both Icon */}
      <Input
        className="w-80"
        endIcon={<LuPlus />}
        label="Username"
        startIcon={<LuPlus />}
      />
    </div>
  )
}
 
export default InputWithFloatingLabelIcon
Edit on GitHub

Previous

DropdownMenu

Next

Label

On this page