Skip to Content
Dashflow Logo

Input Component

A comprehensive guide to using the Input component with examples, props, and best practices.

Overview

The Input component is a versatile form input field that supports labels, validation states, prefix/suffix elements, and various styling options. It's designed to provide a consistent and accessible input experience across your application.

Basic Usage

import { Input } from '@dashflowx/core'


export default function InputExample() {
  return (
    <Input 
      placeholder="Enter your name"
      lable="Full Name"
    />
  )
}

Preview:

Props

PropTypeDefaultDescription
placeholderstring'Enter text...'Placeholder text for the input
disabledbooleanfalseWhether the input is disabled
fullwidthbooleanfalseWhether the input takes full width
lablestring''Label text for the input
requiredbooleanfalseWhether the input is required
sucessMsgstring''Success message to display
errorMsgstring''Error message to display
prefixElementstring''Prefix element (icon, text, etc.)
sufixElementstring''Suffix element (icon, text, etc.)
classNamestring''Additional CSS classes
...propsHTMLInputElement-All standard input HTML attributes

Examples

Basic Input with Label

<Input 
  placeholder="Enter your email"
  lable="Email Address"
  required={true}
/>

Preview:

Input with Success State

<Input 
  placeholder="Enter your name"
  lable="Full Name"
  sucessMsg="Name looks good!"
  fullwidth={true}
/>

Preview:

Name looks good!

Input with Error State

<Input 
  placeholder="Enter your password"
  lable="Password"
  errorMsg="Password must be at least 8 characters"
  required={true}
/>

Preview:

Password must be at least 8 characters

Input with Prefix and Suffix

<Input 
  placeholder="Search products..."
  lable="Search"
  prefixElement="🔍"
  sufixElement="⌨️"
  fullwidth={true}
/>

Preview:

🔍
⌨️

Disabled Input

<Input 
  placeholder="This field is disabled"
  lable="Disabled Field"
  disabled={true}
  fullwidth={true}
/>

Preview:

Common Use Cases

Login Form

<div className="space-y-4">
  <Input 
    placeholder="Enter your email"
    lable="Email"
    required={true}
    fullwidth={true}
  />
  <Input 
    placeholder="Enter your password"
    lable="Password"
    type="password"
    required={true}
    fullwidth={true}
  />
</div>

Search Input

<Input 
  placeholder="Search for products, brands, or categories..."
  lable="Search"
  prefixElement="🔍"
  fullwidth={true}
  className="mb-4"
/>

Form Validation

<Input 
  placeholder="Enter your phone number"
  lable="Phone Number"
  required={true}
  errorMsg="Please enter a valid phone number"
  fullwidth={true}
/>

Input with Custom Styling

<Input 
  placeholder="Custom styled input"
  lable="Custom Input"
  className="mb-6"
  fullwidth={true}
/>

Best Practices

1. Clear Labels

Always provide clear, descriptive labels for your inputs.

// ✅ Good - Clear label
<Input 
  lable="Email Address"
  placeholder="Enter your email"
  required={true}
/>


// ❌ Avoid - Unclear label
<Input 
  lable="Field 1"
  placeholder="Enter something"
/>

2. Appropriate Placeholders

Use placeholders that provide helpful guidance without being too verbose.

// ✅ Good - Helpful placeholder
<Input 
  lable="Username"
  placeholder="Choose a unique username"
/>


// ❌ Avoid - Too verbose placeholder
<Input 
  lable="Username"
  placeholder="Please enter a unique username that is at least 3 characters long and contains only letters and numbers"
/>

3. Validation States

Use success and error messages to provide clear feedback.

// ✅ Good - Clear validation feedback
<Input 
  lable="Email"
  errorMsg="Please enter a valid email address"
  required={true}
/>


// ✅ Good - Success feedback
<Input 
  lable="Username"
  sucessMsg="Username is available"
/>

4. Consistent Sizing

Use fullwidth consistently across your forms.

// ✅ Good - Consistent sizing
<div className="space-y-4">
  <Input lable="First Name" fullwidth={true} />
  <Input lable="Last Name" fullwidth={true} />
  <Input lable="Email" fullwidth={true} />
</div>

5. Accessibility

Ensure proper accessibility with required fields and clear labels.

// ✅ Good - Accessible input
<Input 
  lable="Email Address"
  placeholder="Enter your email"
  required={true}
  errorMsg="Email is required"
/>

Customization

Custom Styling

You can customize the input appearance using CSS classes:

<Input 
  lable="Custom Input"
  className="mb-6"
  fullwidth={true}
/>

Prefix and Suffix Elements

Add icons or other elements to enhance the input:

<Input 
  lable="Price"
  prefixElement="$"
  sufixElement="USD"
  placeholder="0.00"
  fullwidth={true}
/>

Different Input Types

The Input component supports all standard HTML input types:

<Input 
  lable="Email"
  type="email"
  placeholder="Enter your email"
  fullwidth={true}
/>


<Input 
  lable="Password"
  type="password"
  placeholder="Enter your password"
  fullwidth={true}
/>


<Input 
  lable="Number"
  type="number"
  placeholder="Enter a number"
  fullwidth={true}
/>

Form Integration

With Form Libraries

The Input component works well with popular form libraries:

// With React Hook Form
import { useForm } from 'react-hook-form';


function MyForm() {
  const { register, handleSubmit } = useForm();
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Input 
        lable="Email"
        {...register('email', { required: true })}
        fullwidth={true}
      />
    </form>
  );
}

Validation Patterns

Use the Input component with validation patterns:

<Input 
  lable="Phone Number"
  placeholder="(555) 123-4567"
  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  errorMsg="Please enter a valid phone number"
  fullwidth={true}
/>
  • TextArea: For multi-line text input
  • Select: For dropdown selections
  • Checkbox: For boolean selections
  • RadioGroup: For single-choice selections
  • Switch: For toggle selections

API Reference

For the complete API reference and advanced usage patterns, see the Input API documentation.

Edit this page on GitHub
previousForm