ComponentsTrakteer
Input
A text input component
Usage
npx @fydemy/ui@latest add input<Input placeholder="Enter your name" />Prop
Type
Examples
With Label
An input with a label for better accessibility and user experience.
<Input label="Email Address" placeholder="name@example.com" type="email" />
<Input label="Full Name" placeholder="John Doe" />With Icon
An input with icon on the left or right side. Use lucide-react icon is recommended.
<Input
label="Email"
placeholder="name@example.com"
type="email"
icon={<Mail />}
iconPosition="left"
/>
<Input
label="Search"
placeholder="Search..."
type="search"
icon={<Search />}
iconPosition="right"
/>Variants
Control the variant either default, error, or success. default is the default value.
<Input label="Default" placeholder="Default input" variant="default" />
<Input label="Success" placeholder="Valid input" variant="success" />
<Input label="Error" placeholder="Invalid input" variant="error" />With Helper Text
Add helper text or error message to provide additional context or validation feedback.
Must be at least 8 characters
Please enter a valid email address
<Input
label="Password"
type="password"
placeholder="Enter your password"
helperText="Must be at least 8 characters"
/>
<Input
label="Email"
type="email"
placeholder="name@example.com"
variant="error"
errorMessage="Please enter a valid email address"
/>States
Input supports disabled and readonly states.
<Input label="Disabled" placeholder="Cannot edit" disabled />
<Input label="Readonly" placeholder="Read only value" readonly value="Read only content" />Input Types
Support for various HTML input types.
<Input label="Text" type="text" placeholder="Enter text" />
<Input label="Email" type="email" placeholder="name@example.com" icon={<Mail />} iconPosition="left" />
<Input label="Password" type="password" placeholder="Enter password" icon={<Lock />} iconPosition="left" />
<Input label="Number" type="number" placeholder="Enter number" />
<Input label="Search" type="search" placeholder="Search..." icon={<Search />} iconPosition="left" />Controlled Input
Use value and onChange to control the input state.
const [value, setValue] = useState('');
<Input label="Controlled Input" value={value} onChange={(e) => setValue(e.target.value)} placeholder="Type something..." />;