Input

Form input components with validation support, multiple sizes, and variants. Works seamlessly with FormControl for form state management.

Basic Usage

import { Input } from 'uiplex';

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

Sizes

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

Variants

<Input variant="outline" placeholder="Outline" />
<Input variant="filled" placeholder="Filled" />
<Input variant="unstyled" placeholder="Unstyled" />

With FormControl

Email Address*

import { Input, FormControl, FormLabel, FormErrorMessage } from 'uiplex';

<FormControl isInvalid={hasError} isRequired id="email-field">
  <FormLabel>Email Address</FormLabel>
  <Input
    type="email"
    placeholder="Enter your email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
  />
  <FormErrorMessage>Email is required</FormErrorMessage>
</FormControl>

States

<Input placeholder="Normal input" />
<Input isDisabled placeholder="Disabled input" />
<Input isReadOnly placeholder="Read only" value="Read only value" />
<Input isInvalid placeholder="Invalid input" />

Textarea

import { Textarea } from 'uiplex';

<Textarea placeholder="Enter your message" rows={4} />
<Textarea size="sm" placeholder="Small textarea" rows={3} />
<Textarea variant="filled" placeholder="Filled textarea" />

API Reference

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Size of the input
variant	"outline" \| "filled" \| "unstyled"	"outline"	Visual style variant
isInvalid	boolean	false	Whether the input is invalid
isDisabled	boolean	false	Whether the input is disabled
isReadOnly	boolean	false	Whether the input is read-only
className	string	""	Additional CSS classes
style	React.CSSProperties	-	Inline styles
...props	React.InputHTMLAttributes	-	All standard HTML input attributes