Mokri

Preview

Installation

<> import.ts

import { Input } from "@/components/ui/input"

Code

<> component.tsx

import { Input } from "@/components/ui/input"

<Input placeholder="Enter your email" />
<Input type="password" placeholder="Password" />

API Reference

Input

Displays a form input field.

<> import.ts

import { Input } from "@/components/ui/input"

Props

Prop	Type	Default	Description
`label`	`string`	—	Label text for the input
`placeholder`	`string`	`"Enter text..."`	Placeholder text for the input
`type`	`"text" \| "email" \| "password" \| "number" \| "tel" \| "url" \| "file"`	`"text"`	Type of the input field
`isLabel`	`boolean`	`false`	Whether to show the label
`isWithIcon`	`boolean`	`false`	Whether to show an icon
`customIcon`	`React.ReactNode`	—	Custom icon to display
`isWithButton`	`boolean`	`false`	Whether to show a button next to input
`className`	`string`	`""`	Additional CSS classes
`value`	`string`	—	Value of the input
`onChange`	`(e: React.ChangeEvent<HTMLInputElement>) => void`	—	Change handler for the input
`onFocus`	`(e: React.FocusEvent<HTMLInputElement>) => void`	—	Focus handler for the input
`onBlur`	`(e: React.FocusEvent<HTMLInputElement>) => void`	—	Blur handler for the input
`onKeyDown`	`(e: React.KeyboardEvent<HTMLInputElement>) => void`	—	Key down handler for the input
`onButtonClick`	`() => void`	—	Click handler for the button
`buttonText`	`string`	`"Submit"`	Text for the button
`disabled`	`boolean`	`false`	Whether the input is disabled
`bg`	`boolean`	`false`	Whether to show background color
`accept`	`string`	—	Accept attribute for file inputs

Examples

Example 1

<> example.tsx

// Basic input
<Input placeholder="Enter your name" />

Example 2

<> example.tsx

// Input with label
<Input 
  isLabel={true}
  label="Name"
  placeholder="Enter your name" 
/>

Example 3

<> example.tsx

// Input with icon
<Input 
  isWithIcon={true}
  placeholder="Search..." 
/>

Example 4

<> example.tsx

// Input with custom icon
<Input 
  isWithIcon={true}
  customIcon={<SearchIcon />}
  placeholder="Search..." 
/>

Example 5

<> example.tsx

// Input with button
<Input 
  isWithButton={true}
  buttonText="Submit"
  placeholder="Enter email"
  onButtonClick={() => console.log('Submitted')}
/>

Example 6

<> example.tsx

// Different input types
<Input type="email" placeholder="Enter email" />
<Input type="password" placeholder="Enter password" />
<Input type="number" placeholder="Enter number" />