TextField

Text fields let users enter and edit text. Follows the Material Design 3 Text Field specification.

Usage

Open on Snack ↗

import { TextField } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { useState } from 'react'
import { View } from 'react-native'

export default function App() {
  const [value, setValue] = useState('')
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
          <TextField
            label="Email"
            value={value}
            onChangeText={setValue}
          />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Variants

Variant	Description
filled	Filled container with bottom border (default)
outlined	Outlined border around the field

Open on Snack ↗

import { TextField } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { useState } from 'react'
import { View } from 'react-native'

export default function App() {
  const [a, setA] = useState('')
  const [b, setB] = useState('')
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16, gap: 16 }}>
          <TextField label="Filled" variant="filled" value={a} onChangeText={setA} />
          <TextField label="Outlined" variant="outlined" value={b} onChangeText={setB} />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

With Icons

Open on Snack ↗

import { TextField } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { useState } from 'react'
import { View } from 'react-native'

export default function App() {
  const [value, setValue] = useState('')
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
          <TextField
            label="Search"
            value={value}
            onChangeText={setValue}
            leadingIcon="magnify"
            trailingIcon="close"
            onTrailingIconPress={() => setValue('')}
          />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Validation

Open on Snack ↗

import { TextField } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { useState } from 'react'
import { View } from 'react-native'

export default function App() {
  const [email, setEmail] = useState('not-an-email')
  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
          <TextField
            label="Email"
            value={email}
            onChangeText={setEmail}
            error={!isValid}
            errorText="Please enter a valid email address"
            supportingText="We'll never share your email"
          />
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Props

Prop	Type	Default	Required	Description
label	string	-	No	Floating label text. Animates above the input when focused or filled.
variant	enum	filled	No	Container style.
supportingText	string	-	No	Helper text displayed below the field. Hidden when `error` or `errorText` is active.
errorText	string	-	No	Error message. When provided, implicitly sets `error` to `true` and replaces `supportingText`.
error	boolean		No	When `true`, renders the field in error state with error colors.
disabled	boolean		No	Disables text input and reduces opacity.
leadingIcon	IconSource	-	No	Icon rendered at the start of the field. Accepts a string name (resolved via the theme's `iconResolver`, defaulting to `MaterialCommunityIcons`), a pre-rendered element, or a render function that receives `{ size, color }`.
trailingIcon	IconSource	-	No	Icon rendered at the end of the field. Same accepted forms as `leadingIcon`.
onTrailingIconPress	() => void	-	No	Called when the trailing icon is pressed.
containerColor	string	-	No	Override the container (background) color. Disabled state still uses the standard disabled appearance.
contentColor	string	-	No	Override the content (input text and icon) color. Error and disabled states take precedence.
inputStyle	StyleProp<TextStyle>	-	No	Additional style applied to the text input element.