Home/Components/Input

Input Component

A feature-rich input component that supports multiple types, autocomplete, clear button, and more. onChange directly passes the value instead of the event object.

Form ControlCompound Component

Basic Usage

Current value:

import Input from '@featherstudio/react-daisyui-kit';
import { useState } from 'react';

const [value, setValue] = useState('');

<Input
  type="text"
  placeholder="Enter text..."
  value={value}
  onChange={(value) => setValue(value as string)}
/>

With Field and Label

Please enter a valid email address

<Input.Field>
  <Input.Label>Email</Input.Label>
  <Input
    type="email"
    placeholder="your@email.com"
    value={emailValue}
    onChange={(value) => setEmailValue(value as string)}
  />
  <Input.Helper>Please enter a valid email address</Input.Helper>
</Input.Field>

Clear Button

<Input
  allowClear
  placeholder="Clear button appears after typing"
  value={value}
  onChange={(value) => setValue(value as string)}
/>

Color Variants

<Input color="primary" placeholder="Primary" />
<Input color="secondary" placeholder="Secondary" />
<Input color="accent" placeholder="Accent" />
<Input color="success" placeholder="Success" />
<Input color="warning" placeholder="Warning" />
<Input color="error" placeholder="Error" />

Sizes

<Input size="xs" placeholder="Extra Small" />
<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />

Input with Icons (Input.Group)

⌘K

import { FaUser, FaEnvelope, FaLock, FaSearch } from 'react-icons/fa';

<Input.Group>
  <FaUser className="opacity-70" />
  <Input type="text" placeholder="Username" className="border-0" />
</Input.Group>

<Input.Group>
  <Input type="text" placeholder="Search" className="border-0" />
  <FaSearch className="opacity-70" />
</Input.Group>

<Input.Group>
  <FaLock className="opacity-70" />
  <Input type="password" placeholder="Password" className="border-0" />
  <kbd className="kbd kbd-sm">⌘K</kbd>
</Input.Group>

Autocomplete (Datalist)

<Input
  placeholder="Select a fruit..."
  value={value}
  onChange={(value) => setValue(value as string)}
  datalist={{
    listId: 'fruits',
    suggestions: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']
  }}
/>

File Upload

const [fileValue, setFileValue] = useState<FileList | null>(null);

<Input
  type="file"
  onChange={(value) => {
    const files = value as FileList;
    setFileValue(files);
    console.log('Selected files:', files);
  }}
/>

Props

Prop	Type	Default	Description
value	string \| FileList	-	The input value
onChange	(value: string \| FileList) => void	-	Callback when value changes, receives value directly instead of event
allowClear	boolean	false	Show clear button
color	'primary' \| 'secondary' \| 'accent' \| ...	-	Input color
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	-	Input size
ghost	boolean	false	Ghost style
datalist	{ listId: string; suggestions: string[] }	-	Autocomplete suggestions list
type	string	'text'	HTML input type (支援 file 等所有類型)

Sub Components

Input.Field

Form control wrapper using daisyUI's form-control

Input.Label

Label component, supports alt attribute for style switching

Input.Group

Combines input with icons, buttons, and other elements

Input.Helper

Helper text for additional guidance

Features

🎯 Direct Value Passing

onChange directly passes the value (string | FileList) without needing to extract from event object

📁 File Upload Support

Automatically handles FileList when type="file", providing a unified API

🧹 Clear Functionality

Built-in clear button, enabled with allowClear prop

🎨 Compound Component Design

Provides flexible composition with Field, Label, Group, and Helper sub-components

← Back to Components