↗
↗
↗
↗
☰
LabeledInputField
iOS
Android
Web
TV
An inline floating-label input with optional leading and trailing components. Use it when the label should live inside the input row.
Import
tsx
Copy
import
{
LabeledInputField
}
from
'react-native-cross-elements'
;
Basic usage
Preview
Code
labeled-input-field.tsx
@
Full name
Value: empty
When to use it
ℹ️
Use LabeledInputField for compact inline forms. Use FlatLabelInput when you want the label arranged above the input container.
Props
Prop
Type
Default
Description
onChange
req
(text: string) => void
—
Called when text changes.
inputConfig
req
InputConfig
—
TextInput props and placeholder config.
labelStyle
LabelInputStyle
—
Placeholder and filled-label styling.
textStyle
TextStyle
—
Text input typography.
leftComponent
ReactElement | (state) => ReactElement
—
Leading adornment.
rightComponent
ReactElement | (state) => ReactElement
—
Trailing adornment.
style
LabelInputStyle | (state) => LabelInputStyle
—
Container style or callback.