Skip to content
Docs
Components
Inputs
Input

Input

Component that is based on react native TextInput component.

Import

import { Input } from 'react-native-ficus-ui';

Usage

With prefix

EDITABLE EXAMPLE
<Input
  placeholder="Username"
  focusBorderColor="blue.500"
  prefix={<Icon name="search" color="gray.900" fontFamily="Feather" />}
/>

With suffix

EDITABLE EXAMPLE
<Input
  placeholder="Username"
  focusBorderColor="blue.500"
  suffix={<Icon name="search" color="gray.900" fontFamily="Feather" />}
/>

Password

EDITABLE EXAMPLE
<Input
  placeholder="Password"
  secureTextEntry
  focusBorderColor="blue.500"
/>

Custom border style

EDITABLE EXAMPLE
<Box>
  <Input
    placeholder="Username"
    borderWidth={2}
    focusBorderColor="orange.500"
    focusBorderWidth={3}
    suffix={<Icon name="search" color="gray.900" fontFamily="Feather" />}
  />
  <Input
    mt="md"
    placeholder="Username"
    borderWidth={2}
    focusBorderColor="red.500"
    focusBorderWidth={3}
    focusBorderStyle="dashed"
    suffix={<Icon name="search" color="gray.900" fontFamily="Feather" />}
  />
</Box>

Textarea

EDITABLE EXAMPLE
<Box>
  <Textarea focusBorderColor="blue.500" />
  <Textarea
    mt="md"
    focusBorderColor="red.500"
    focusBorderWidth={3}
    focusBorderStyle="dashed"
  />
</Box>

Props

Extends every Box props and react native TextInput component.

https://reactnative.dev/docs/textinput#props (opens in a new tab)

focusBorderColor

The border color when input is focused.

TypeRequired
stringNo

focusBorderWidth

The border width when input is focused.

TypeRequiredDefault
numberNo2

focusBorderStyle

The border style property when input is focused.

TypeRequiredDefault
"solid", "dashed", "dotted"No"solid"