input.md

Input

Adapt UI provides one theme for input with four styles and eight interaction states. Use this component to receive information from the user.

Simple Usage

import { Input } from "@adaptui/react-native-tailwind"
export default function App() {
  return (
      <Input placeholder="Search" />
  )
}

Table of Contents

• Themes
• Variant
• Size
• Prefix
• Suffix
• Props

Themes

Adapt UI provides only one base theme for Input.

Usage

import { Input, Search, Icon } from "@adaptui/react-native-tailwind"
export default function App() {
  return (
      <Input
        prefix={<Icon icon={<Search />} />}
        placeholder="Search any places, stays or experiences"
      />
  )
}

Variant

Adapt UI provides four different input field components styles: outline, subtle, underline, and ghost.

You can use these various styled input field components based on the necessity and style you wish to provide to your design.

Usage

import { Input, useTheme } from "@adaptui/react-native-tailwind"

export default function App() {
  const tailwind = useTheme();
  return (
    <>
      <Input placeholder="Full name" />
      <Input variant="subtle" placeholder="Full name" />
      <Input variant="underline" placeholder="Enter installment amount" />
      <Input variant="ghost" placeholder="Enter landmark" />
    </>
  )
}

Size

There are four different sizes for input in Adapt UI: sm, md, lg & xl

Based on the hierarchy, you can switch between different sizes.

Usage

import { Input, useTheme } from "@adaptui/react-native-tailwind"

export default function App() {
  const tailwind = useTheme();
  return (
    <>
      <Input size="sm" placeholder="Full name" />
      <Input placeholder="Full name" />
      <Input size="lg" placeholder="Full name" />
      <Input size="xl" placeholder="Full name" />
    </>
  )
}

Prefix

The prefix is a slot at a component's beginning or prefix position. Here in the input, the prefix slot can be used to bring an icon or, if we need to think wild, maybe even an avatar. Prefix itself doesn't have any unique property.

There are no restrictions on what should be inside the prefix. Whatever component it is, it should work fine.

Usage

import { Input, useTheme, Icon, Location } from "@adaptui/react-native-tailwind"

export default function App() {
  const tailwind = useTheme();
  return (
    <>
      <Input
        placeholder={"Where are you going?"}
        prefix={<Icon icon={<Location />} />}
      />
    </>
  )
}

Suffix

The suffix is the same as the prefix, with only a difference in its position. Suffix usually is at the end of a component. Here in the input field component, the suffix slot can bring an icon or a spinner to show the loading interaction of the input component.

Usage

import { Input, useTheme, Icon, Location } from "@adaptui/react-native-tailwind"

export default function App() {
  const tailwind = useTheme();
  return (
    <>
      <Input
        textInputWrapperProps={{ style: tailwind.style("my-2") }}
        placeholder={"Enter email"}
        invalid
        suffix={<Icon icon={<Info />} />}
      />
    </>
  )
}

Props

Input implements TextInput from React Native accepting all TextInputProps

Name	Description	Type	Default
size	Size of Input	sm md lg xl	md
variant	How will the Input look?	outline subtle underline ghost	outline
suffix	If added, the Input will show an icon after the Input's text.	JSX.Element	null
prefix	If added, the Input will show an icon before the Input's text.	JSX.Element	null
invalid	Set to true, when Input Value is invalid	boolean	false
loading	If true, Input renders a spinner in suffix slot	boolean	false
_prefixProps	Touchable props for the prefix element	PressableProps	{}
_suffixProps	Touchable props for the suffix element	PressableProps	{}