TextInput

A text input component built over RNTextInput, supporting sizes, modes, dense layout, icons, error states, and full customization.

Usage Playground

Mode

outlined

flat

Dense

Label

Placeholder

Caption

Error

Disabled

Size

small

medium

large

Code Snippet

import { TextInput } from "@react-native-blossom-ui/components";

    function Usage() {
        return (
            <TextInput/>
        );
    }

Usage

Name

function TextInputUsage() {
  return (
    <View>
      <TextInput label="Name" placeholder="Enter name" />
    </View>
  )
}

Size

Name

Name

Name

function TextInputSizes() {
  return (
    <View>
      <TextInput label="Name" placeholder="Enter name" size="small" />
      <TextInput label="Name" placeholder="Enter name" size="medium" />
      <TextInput label="Name" placeholder="Enter name" size="large" />
    </View>
  )
}

Modes

Use the mode prop to switch between different visual styles of the input, e.g., outlined or flat.

Flat Input

Outlined Input

function TextInputModes() {
  return (
    <View>
      <TextInput label="Flat Input" placeholder="Placeholder" mode="flat" />
      <TextInput
        label="Outlined Input"
        placeholder="Placeholder"
        mode="outlined"
      />
    </View>
  )
}

Dense

Use the dense prop to have the darker backboard in the text input container

Label

Label

function TextInputDense() {
  return (
    <View>
      <TextInput label="Label" placeholder="Placeholder" mode="flat" dense />
      <TextInput label="Label" placeholder="Placeholder" dense />
    </View>
  )
}

Disabled

Address

function TextInputDisabled() {
  return (
    <View>
      <TextInput label="Address" placeholder="Address" value="Home" disabled />
    </View>
  )
}

Error

Use the error prop to display error styling and messages.

Password

Please enter a password of min. length 8

function TextInputError() {
  const [password, setPassword] = useState('')

  return (
    <View>
      <TextInput
        label="Password"
        placeholder="Enter Password"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
        error={
          password.length < 8 ? 'Please enter a password of min. length 8' : ''
        }
      />
    </View>
  )
}

Status

Label

Label

Label

Label

Label

Label

function TextInputStatuses() {
  return (
    <View>
      <TextInput status="primary" label="Label" placeholder="Placeholder" />
      <TextInput status="accent" label="Label" placeholder="Placeholder" />
      <TextInput status="success" label="Label" placeholder="Placeholder" />
      <TextInput status="info" label="Label" placeholder="Placeholder" />
      <TextInput status="warning" label="Label" placeholder="Placeholder" />
      <TextInput status="error" label="Label" placeholder="Placeholder" />
    </View>
  )
}

Icons

Supports left and right props to display icons inside the input field.

Password



function TextInputIcons() {
  const [showPassword, setShowPassword] = useState(false)

  return (
    <View>
      <TextInput
        label="Password"
        placeholder="Enter Password"
        secureTextEntry={!showPassword}
        left={<Icon name="lock-closed" />}
        right={
          <Icon
            name={showPassword ? 'eye' : 'eye-off'}
            onPress={() => setShowPassword(!showPassword)}
          />
        }
      />
    </View>
  )
}

Custom

Custom Text Input

󰇮

Custom Text Input

function TextInputCustom() {
  return (
    <View>
      <TextInput
        label="Custom Text Input"
        placeholder="Custom input"
        left={<Icon name="email" family="MaterialCommunityIcons" />}
        inputContainerStyle={{backgroundColor: 'cyan'}}
      />
      <TextInput
        label="Custom Text Input"
        placeholder="Custom input"
        mode="flat"
        inputContainerStyle={{backgroundColor: 'cyan'}}
      />
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	RNTextInputProps	--	Inherits properties from RNTextInputProps
mode	"outlined" | "flat"	outlined	Control the different modes of the text input
dense	boolean	--	Have a denser background in the text input
label	string	--	Label text above the input
placeholder	string	--	Placeholder for the text input
placeholderComponent	ReactNode	--	Render a custom Placeholder component for the text input
caption	string	--	Caption text below the text input
error	string	--	TODO: TextInput will always render this and take the space to fix the flicker issue in show/hide errorError text in error status below caption text
labelStyle	StyleProp<TextStyle>	--	Label text style
captionStyle	StyleProp<TextStyle>	--	Caption text style
errorStyle	StyleProp<TextStyle>	--	Error text style
containerStyle	StyleProp<ViewStyle>	--	Container view style including label, caption & error
inputContainerStyle	StyleProp<ViewStyle>	--	Input container style including left, right section, custom placeholder and input text
inputTextStyle	StyleProp<TextStyle>	--	Input text style equivalent to react-native style for TextInput
disabled	boolean	--	Set to true to disable the button
shouldMockDisableState	boolean	--	Mock the disable behavior not the styling for popover contained inputs
left	ReactNode	--	Render Icon/JSX on the left of the button
right	ReactNode	--	Render Icon/JSX on the right of the button
status	BlossomStatus	primary	Status of the component to apply color variants'primary' | 'accent' | 'success' | 'info' | 'warning' | 'error'
size	BlossomSize	medium	Size of the component'small' | 'medium' | 'large'