↗
↗
↗
↗
☰
FlatLabelInput
iOS
Android
Web
An animated floating-label text input. The label smoothly transitions from placeholder position to a smaller filled label when text is entered or the field is focused.
Import
tsx
import { FlatLabelInput, type FlatInputProps, type InputConfig, type LabelInputStyle, } from 'react-native-cross-elements';
Basic usage
flat-label-input.tsx
Email address
Password
With icons
Use leftComponent and rightComponent as render-props that receive the current LabelInputState (focused, hovered, filled).
tsx
import { Text } from 'react-native'; <FlatLabelInput onChange={setText} backgroundColor="#18181b" selectedBackgroundColor="#27272a" pressedBackgroundColor="#3f3f46" labelStyle={{ color: '#71717a', fontSize: 15, labelFilledColor: '#52525b', labelFilledFontSize: 11, }} textStyle={{ color: '#e4e4e7' }} inputStyle={{ width: '100%' }} inputConfig={{ placeholder: 'Password', secureTextEntry: true, className: 'docs-flat-input', }} rightComponent={(state) => ( <Text style={{ marginLeft: 8, opacity: state.focused ? 1 : 0.5 }}>��</Text> )} style={{ height: 56 }} />
Label fill animation
✨
Control the filled-state label appearance with labelFilledFontSize and labelFilledColor inside labelStyle. These override the base label style only when the field has content.
Web notes
Use LabeledInputFieldWeb for a web-optimized variant that accepts additional className hooks on the container and input element.
FlatInputProps
Prop
Type
Default
Description
onChange
req
(text: string) => void
—
Called when text changes.
inputConfig
req
InputConfig
—
TextInput props plus web className.
labelStyle
{ labelFilledFontSize?, labelFilledColor?, ...TextStyle }
—
Label styling plus filled-state overrides.
textStyle
TextStyle
—
Typography for the input text.
style
LabelInputStyle | (state) => LabelInputStyle
—
Container style or callback.
leftComponent
ReactElement | (state: LabelInputState) => ReactElement
—
Leading icon or element.
rightComponent
ReactElement | (state: LabelInputState) => ReactElement
—
Trailing icon or element.
backgroundColor
ColorValue
—
Default background.
selectedBackgroundColor
ColorValue
—
Background when focused/hovered.
pressedBackgroundColor
ColorValue
—
Background when pressed.
className
string
—
Container CSS class on web.
InputConfig
Prop
Type
Default
Description
className
string
—
CSS class for the input element on web.
placeholderClassName
string
—
CSS class for the placeholder on web.
...TextInputProps
TextInputProps
—
All standard RN TextInput props except style, onFocus, onBlur, onPointerEnter, onPointerLeave, onChangeText.