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.
Import
import { FormInput } from "@sparrowengg/twigs-react";Usage
const FormInputExample = () => {
return (
<Box css={{ display: "flex", flexDirection: "column", gap: "$4" }}>
<FormInput
label="Email Address"
placeholder="Enter your email"
helperText="We'll never share your email with anyone else."
/>
<FormInput
label="Password"
type="password"
placeholder="Enter your password"
error="Password must be at least 8 characters long"
/>
</Box>
);
};Examples
Variants and advanced features
Explore all available features and varieties of the FormInput component.
Props
FormInput
| Prop | Type | Default |
|---|---|---|
label? | string | - |
showCount? | boolean | false |
error? | string | - |
requiredIndicator? | boolean | ReactElement | - |
helperText? | string | - |
info? | string | ReactNode | - |
renderCounter? | ({ length, maxLength }: { length: number; maxLength?: number; }) => ReactNode | - |
size? | 'sm' | 'md' | 'lg' | 'xl' | 'md' |
variant? | 'default' | 'filled' | 'default' |
disabled? | boolean | false |
leftIcon? | ReactElement | - |
rightIcon? | ReactElement | - |
leftElement? | ReactElement | - |
rightElement? | ReactElement | - |
errorBorder? | boolean | false |
maxLength? | number | - |
onChange? | (e: React.ChangeEvent<HTMLInputElement> | React.FormEvent<HTMLInputElement>) => void | - |
value? | string | - |
defaultValue? | string | - |
placeholder? | string | - |
type? | string | 'text' |
css? | object | - |
as? | React.ElementType | - |
FormLabel
A component for providing accessible labels for form controls with additional features like required indicators, info tooltips, and right addons.
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.