Input
A versatile input component with multiple sizes, variants, and icon support. Perfect for forms, search interfaces, and data entry with comprehensive styling options and accessibility features.
Import
import { Input } from "@sparrowengg/twigs-react";Usage
const InputExample = () => {
return (
<Input
placeholder="Default input"
size="sm"
variant="default"
/>
);
};Examples
With Icons and Advanced Features
Comprehensive example showing all Input features including icons, different states, and interactive elements.
Props
Input
| Prop | Type | Default |
|---|---|---|
size? | 'sm' | 'md' | 'lg' | 'xl' | 'md' |
variant? | 'default' | 'filled' | 'default' |
leftIcon? | ReactElement | - |
rightIcon? | ReactElement | - |
leftElement? | ReactElement | - |
rightElement? | ReactElement | - |
errorBorder? | boolean | false |
disabled? | boolean | false |
maxLength? | number | - |
onChange? | (e: React.ChangeEvent<HTMLInputElement> | React.FormEvent<HTMLInputElement>) => void | - |
css? | object | - |
className? | string | - |
The Input component also accepts all standard HTML input attributes such as type, placeholder, value, defaultValue, name, id, required, readOnly, autoComplete, autoFocus, pattern, min, max, step, and event handlers like onFocus, onBlur, onKeyDown, etc.
FormInput
A comprehensive form input that combines Input, FormLabel, and FormHelperText components. Provides built-in support for labels, error messages, helper text, character counting, and various styling options.
Radio
A set of checkable buttons where only one can be selected at a time. Perfect for single-choice selections with keyboard navigation, accessibility features, and customizable sizing options.