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"
  prefix={<Icon name="search" color="gray.900" fontFamily="Feather" />}
/>

With suffix

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

Password

EDITABLE EXAMPLE
<Input
  placeholder="Password"
  secureTextEntry
/>

Custom color scheme

EDITABLE EXAMPLE
<Input
  placeholder="Username"
  colorScheme="red"
/>

Custom border style

EDITABLE EXAMPLE
<Box>
  <Input
    placeholder="Username"
    borderWidth={2}
    suffix={<Icon name="search" color="gray.900" />}
    _focused={{
      borderWidth: 3,
      borderColor: "orange.500"
    }}
  />
  <Input
    mt="md"
    placeholder="Username"
    borderWidth={2}
    suffix={<Icon name="search" color="gray.900" />}
    _focused={{
      borderWidth: 3,
      borderColor: "red.500",
      borderStyle: "dashed"
    }}
  />
</Box>

Textarea

EDITABLE EXAMPLE
<Box>
  <Textarea mt="md" />
  <Textarea
    mt="md"
    _focused={{
      borderWidth: 3,
      borderColor: "red.500",
      borderStyle: "dashed"
    }}
  />
</Box>

Props

Extends every Box props and react native TextInput component.

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

RadioTextarea