Input

The Input component is your go-to tool for gathering user input in a sleek and user-friendly text field. Whether you're designing a simple login form or a complex search feature, this component has got you covered.
Installation
API Reference
This is an illustration of Input component.
variant
size
isDisabled
isInvalid
isReadOnly
<Input
variant="outline"
size="md"
isDisabled={false}
isInvalid={false}
isReadOnly={false}
>
<InputField placeholder="Enter Text here" />
</Input>

Installation

Run the following command:

npx gluestack-ui add input

API Reference

To use this component in your project, include the following import statement in your file.
import { Input } from "@/components/ui/input"
export default () => (
<Input>
<InputField />
<InputSlot>
<InputIcon>{/* Some Icon Component */}</InputIcon>
</InputSlot>
</Input>
)

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Input

It inherits all the properties of React Native's View component.
Prop
Type
Default
Description
isInvalid
bool
false
When true, the input displays an error state.
isDisabled
bool
false
When true, the input is disabled and cannot be edited.
isHovered
bool
false
When true, the input displays a hover state.
isFocused
bool
false
When true, the input displays a focus state.
isRequired
bool
false
If true, sets aria-required="true" on the input.
isReadOnly
bool
false
If true, the input value cannot be edited.
Descendants Styling Props Props to style child components.
Sx Prop
Description
_input
Prop to style InputField Component
_icon
Prop to style InputIcon Component

InputField

Contains all TextInput related layout style props and actions. It inherits all the properties of React Native's TextInput component.
Prop
Type
Default
Description
type
'text' | 'password'
'text'
If true, the input component obscures the text entered so that sensitive text like passwords stay secure.

InputSlot

It inherits all the properties of React Native's Pressable component.
Descendants Styling Props Props to style child components.
Sx Prop
Description
_icon
Prop to style InputIcon Component

InputIcon

Contains all Icon related layout style props and actions. It inherits all the properties of React Native's View component.