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

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

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

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 > 5 ? '' : '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>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	Omit<TextInputProps$1, 'style'>	--	Inherits properties from Omit<TextInputProps$1, 'style'>
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
caption	string	--	Caption text below the text input
error	string	--	Error text in error status below caption text
labelStyle	StyleProp<TextStyle>	--	Label text style
placeholderStyle	StyleProp<TextStyle>	--	Placeholder text style
captionStyle	StyleProp<TextStyle>	--	Caption text style
errorStyle	StyleProp<TextStyle>	--	Error text style
containerStyle	StyleProp<ViewStyle>	--	Container view style
inputStyle	StyleProp<ViewStyle>	--	Input box style
textStyle	StyleProp<TextStyle>	--	Input text style equivalent to react-native style for TextInput
disabled	boolean	--	Set to true to disable the button
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	--
size	BlossomSize	medium	--