Input

A feature-rich React Native Input component – supports icons, validation, and styling options for seamless user input in your mobile app. This is an illustration of Input component.
isDisabled
isInvalid
isReadOnly
variant
size

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.
PlatformOutput
Web
<input />
Native
<TextInput />

Props

PropTypeDefaultDescription
isInvalid
booleanfalseWhen true, the input displays an error state
isDisabled
booleanfalseWhen true, the input is disabled and cannot be edited
isHovered
booleanfalseWhen true, the input displays a hover state
isFocused
booleanfalseWhen true, the input displays a focus state
isRequired
booleanfalseIf true, sets aria-required="true" on the input
isReadOnly
booleanfalseIf true, the input value cannot be edited
size
xl | lg | md | smmdThe size of the input
variant
underlined | outline | roundedoutlineThe variant of the input

Features

  • Keyboard support for actions.
  • Support for hover, focus and active states.
  • Option to add your styles or use the default styles.

Accessibility

We have outlined the various features that ensure the Input component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. Adheres to the WAI-ARIA design pattern.

Keyboard

  • Setting the
    aria-label
    and
    aria-hint
    to help users understand the purpose and function of the Input

Screen Reader

  • Compatible with screen readers such as VoiceOver and Talk-back.
  • The
    accessible
    and
    aria-label
    props to provide descriptive information about the Input
  • Setting
    aria-traits
    and
    aria-hint
    to provide contextual information about the various states of the Input, such as "double tap to edit".

Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

Input with FormControl

The Input component integrates with an icon and a button, providing users with a comprehensive login window inside a FormControl component.

Input with Icons

The Input with Icons is a variation of the Input component that displays icons next to input field. It's commonly used in apps for a more visual representation of options and easier navigation.
Edit this page on GitHub
Go backFormControl
Up nextLink