Input Field - rafty/ui Docs

Input field is a component that is used to get user input in a text field.

This is a custom component made upon native html label component and its props.

Anatomy

Import the component.

import { InputField } from "@rafty/ui";

<InputField />;

Usage

<InputField placeholder="Basic usage" />

Size

There are 3 size options in input field: sm, md (default) & lg.

<div className="space-y-4">
  <InputField size="sm" />
  <InputField size="md" />
  <InputField size="lg" />
</div>

Variant

There are 3 variant options in input field: solid, outline (default) & ghost.

<div className="space-y-4">
  <InputField variant="solid" />
  <InputField variant="ghost" />
  <InputField variant="outline" />
</div>

IsRequired

isRequired prop is used to show required field. It adds red star (*) after label.

<InputField isRequired />

IsDisabled

isDisabled prop is used to disable subcomponent or children field.

<InputField isDisabled />

IsReadOnly

isReadOnly prop is used to change field state to read-only.

<InputField
  defaultValue="This is a sample default value"
  isReadOnly
/>

IsInvalid

isInvalid prop is used to show invalid field on certain condition.

<InputField isInvalid />

IsLoading

isLoading prop is used to show a field in a loading state.

<InputField isLoading />

Unstyled

Pass isUnstyled prop to remove style component

<InputField
  className="border-secondary-300 dark:border-secondary-600 w-full rounded-md border bg-transparent p-1 transition-colors duration-300 hover:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500 dark:hover:border-cyan-500"
  isUnstyled
/>

Left Addon

<InputGroup>
  <LeftAddon>
    <PhoneIcon
      className="stroke-2"
      height={16}
      width={16}
    />
  </LeftAddon>
  <InputField
    placeholder="Phone number"
    type="tel"
  />
</InputGroup>

Right Addon

<InputGroup>
  <InputField />
  <RightAddon>
    <MagnifyingGlassIcon
      className="stroke-2"
      height={16}
      width={16}
    />
  </RightAddon>
</InputGroup>

Prefix

<InputGroup>
  <Prefix>
    <PhoneIcon
      className="stroke-2"
      height={16}
      width={16}
    />
  </Prefix>
  <InputField />
</InputGroup>

Suffix

<InputGroup>
  <InputField />
  <Suffix>
    <CheckIcon
      className="stroke-2 text-green-500"
      height={16}
      width={16}
    />
  </Suffix>
</InputGroup>

API

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`	false