Twigs Logo

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

PropTypeDefault
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
-