Input

The Input component is a basic input component which users can use to enter values into it.

Usage#

Code#

<Input placeholder="Enter your name" />

Sizes#

The input component uses width and height properties for the size of the component. Both the props accepts number values. The default value for width is 300 and height is 32

Code#

<Input placeholder="Enter your name" height={28} width={200} />
<Input placeholder="Enter your name" height={40} width={300} />
<Input placeholder="Enter your name" height={40} width={300} />

Icon Input#

The input field can have a icon by using the props suffix and prefix

₹

Code#

<Input
  placeholder="Enter your email"
  suffix={
    <div style={{ color: "#888" }}>
      <FontAwesomeIcon icon={faAt} />
    </div>
  }
/>
<Input
  placeholder="Search"
  prefix={
    <div style={{ color: "#888" }}>
      <FontAwesomeIcon icon={faSearch} />
    </div>
  }
/>
<Input
  placeholder="Enter amount"
  prefix={<div style={{ color: "#888" }}>₹</div>}
/>

Disabled#

The input field can be disabled by using a boolean prop called disabled

Code#

<Input placeholder="Enter your name" disabled />

Validation#

The validation of input field is done by two props isValid and validationText. The isValid prop is a boolean which denotes the validation for the field and validationText acts as a validation message

The validationText prop is not mandatory for indicating validation

Please enter a name

Code#

<Input placeholder="Enter your name" isInvalid={true} />
<Input
  placeholder="Enter your name"
  isInvalid={true}
  validationText="Please enter a name"
/>

Controlled Usage#

The Input component from Palette is same as the input use value and onChange props to control the field value. Use event.target.value from onChange to set the value

const MyComponent = () => {
  const [name, setName] = useState("");
  return (
    <Input
      placeholder="Enter your name"
      value={name}
      onChange={(e) => {
        setName(e.target.value);
      }}
    />
  );
};

API#

Prop	Type	Possible values	Default Value
placeholder	`string`	Any string value	`""`
height	`number`	Any number accepted values	400
width	`number`	Any number accepted values	400
disabled	`boolean`	`true` and `false`	`false`
suffix	`ReactNode`	-	-
prefix	`ReactNode`	-	-
isInvalid	`boolean`	`true` and `false`	`false`
validationText	`string`	Any string value	`""`
value	`any`	Any	-
onChange	`()=>void`	-	-

Built by Akshay 🤙