Input

This component extends the input HTML element. Use Input to receive user's input (no pun intended)

Usage

This demo is not perfect because theming is off and still a work in progress

Import the Input component from @avocado-ui/react and render like so

import { Input } from "@avocado-ui/react";
render(<Input placeholder="Enter your name" />);

import { Input } from "@avocado-ui/react";
render(<Input placeholder="Enter your name" />);

You get an uncontrolled input by default so you'll need to handle input state the way you desire

Shape

The Input component can be in one of 3 shapes - round, curve and square. Use the shape prop to specified the desired border shape.

import { Input } from "@avocado-ui/react";
render(
  <>
    <Input placeholder="Rounded" borderRadius="round" />
    <Input placeholder="Squared" borderRadius="square" />
    <Input placeholder="Curved" borderRadius="curve" />
  </>
);

import { Input } from "@avocado-ui/react";
render(
  <>
    <Input placeholder="Rounded" borderRadius="round" />
    <Input placeholder="Squared" borderRadius="square" />
    <Input placeholder="Curved" borderRadius="curve" />
  </>
);

With Label Text

It's great practice to include label text on controls so information can be available to user's at all times. Avocado provides a labelText prop that shows a string at the top of the control. Here's an example...

Input with label text 😲

import { Input } from "@avocado-ui/react";
render(
  <>
    <Input
      placeholder="Rounded"
      borderRadius="round"
      labelText="Input with label text 😲"
    />
  </>
);

import { Input } from "@avocado-ui/react";
render(
  <>
    <Input
      placeholder="Rounded"
      borderRadius="round"
      labelText="Input with label text 😲"
    />
  </>
);

Input Size

The Input comes in 3 sizes - sm, md and lg respectively. Set the desired size with the size prop.

import { Input } from "@avocado-ui/react";
render(
  <>
    <Input placeholder="Enter name" inputSize="sm" />
    <Input placeholder="Enter name" inputSize="md" />
    <Input placeholder="Enter name" inputSize="lg" />
  </>
);

import { Input } from "@avocado-ui/react";
render(
  <>
    <Input placeholder="Enter name" inputSize="sm" />
    <Input placeholder="Enter name" inputSize="md" />
    <Input placeholder="Enter name" inputSize="lg" />
  </>
);

Input Variant

You can set the type of the Input with the variant prop. Set it to unstyled, solid or outline to get the desired Input type.

import { Input } from "@avocado-ui/react";
render(
  <>
    <Input placeholder="Enter Name" variant="unstyled" />
    <Input placeholder="Enter Name" variant="fill" />
    <Input placeholder="Enter Name" variant="outline" />
  </>
);

import { Input } from "@avocado-ui/react";
render(
  <>
    <Input placeholder="Enter Name" variant="unstyled" />
    <Input placeholder="Enter Name" variant="fill" />
    <Input placeholder="Enter Name" variant="outline" />
  </>
);

Input With Icon

The Input component is commonly paired with icons. You can do this with the prefixIcon and suffixIcon prop. You'll have to set this to a React.ReactNode component, but it's more advisable to use an icon. Here's it working with feather icons.

import { Input } from "@avocado-ui/react";
import { Activity, Save, Heart, User } from "react-feather";

render(
  <>
    <Input placeholder="Enter Name" prefixIcon={<Activity />} />
    <Input
      inputSize="sm"
      placeholder="Enter Name"
      prefixIcon={<Save />}
      suffixIcon={<Heart />}
    />
    <Input placeholder="Enter Name" suffixIcon={<User />} />
  </>
);

import { Input } from "@avocado-ui/react";
import { Activity, Save, Heart, User } from "react-feather";

render(
  <>
    <Input placeholder="Enter Name" prefixIcon={<Activity />} />
    <Input
      inputSize="sm"
      placeholder="Enter Name"
      prefixIcon={<Save />}
      suffixIcon={<Heart />}
    />
    <Input placeholder="Enter Name" suffixIcon={<User />} />
  </>
);

Disabled Input

A disabled Input does not respond to user's actions - hover, focus, etc and shows a not-allowed cursor.

import { Input } from "@avocado-ui/react";
render(<Input placeholder="Enter your name" disabled />);

import { Input } from "@avocado-ui/react";
render(<Input placeholder="Enter your name" disabled />);

Props Table

property	description	type	default
variant	variant of input	`filled`, `unstyled`,`outline`	`outline`
fullWidth	should input span entire block	`true`, `false`	`false`
required	is input required	`true`, `false`	`false`
prefixIcon	icon by the left of the input component	React.ReactNode	`null`
suffixIcon	icon by the right of the input component	React.ReactNode	`null`
disabled	makes input inactive	`true`, `false`	`false`
inputSize	size of the input	`sm`, `md`, `lg`	`md`
borderRadius	controls the appearance of the borders	`round`, `curve`, `square`	`curve`