Input

Import

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

Usage

Result

Loading...

Live EditorOpen in playground

<Input placeholder="Enter your email" />

Variants

Input with icons

Result

Loading...

Live EditorOpen in playground

<Flex gap="4px" flexDirection="row">
  <Input leftIcon={<SearchIcon />} placeholder="Input with left icon" />
  <Input rightIcon={<SearchIcon />} placeholder="Input with right icon" />
  <Input
    leftIcon={<UserIcon />}
    rightIcon={<SearchIcon />}
    placeholder="Input with left and right icon"
  />
</Flex>

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
maxLength	Maximum allowed characters	number
errorBorder	Show error border when there is error	boolean	false