FormInput

FormInput is a wrapper around Input and FormLabel component. It is used to create a form input field with label and error message.

Import

import { FormInput } from "@sparrowengg/twigs-react";

Usage

Result

Loading...

Live EditorOpen in playground

<FormInput label="Email Address" />

Input error

Result

Loading...

Live EditorOpen in playground

<FormInput
  label="Email Address"
  error="Not a valid email address"
/>

Character count

<FormInput
  value={"john@example.com"}
  showCount={true}
  maxLength={10}
/>

Using maxLength and showCount props, you can show the character count of the input field.

Result

Loading...

Live EditorOpen in playground

function CharacterCount() {
  const [value, setValue] = React.useState("");
  return (
    <FormInput
      label="Email Address"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      showCount
      maxLength={10}
    />
  );
}

Props

Property	Description	Type	Default
variant	style of input	default filled	default
onChange		function
size	input size	sm md lg xl	md
disabled		boolean	false
leftIcon	Append icon on the left side of input	JSX Element
rightIcon	Append icon on the right side of input	JSX Element
css	Custom styles for input	object
error	Message for input error	string
maxLength	Maximum allowed characters	number
showCount	Show remaining allowed character length	boolean
errorBorder	Show error border when there is error	boolean	false
requiredIndicator	Show required indicator next to input label	boolean, JSX Element