An entry with a configurable border and inline error message. The border and separator are independently controlled — mix and match to suit your design.
Border / separator combinations
BorderVisible
SeparatorVisible
Error state appearance
false
false
no border, no separator — only error text
true
false
border switches to ErrorBorderColor, no separator
false
true
no border, separator line appears above error text
true
true
border and separator both switch to error color
<!-- No border, separator only -->
<cc:ValidationEntry
Placeholder="Email"
Keyboard="Email"
SeparatorVisible="True"
ErrorSeparatorColor="Red"
ErrorMessage="Please enter a valid email"
IsValid="{Binding IsEmailValid}" />
<!-- Border only -->
<cc:ValidationEntry
Placeholder="Username"
BorderColor="Gray"
BorderVisible="True"
ErrorBorderColor="Red"
ErrorMessage="This field is required"
IsValid="{Binding IsUsernameValid}" />
<!-- Border and separator with corner radius -->
<cc:ValidationEntry
Placeholder="Password"
BorderColor="Black"
BorderVisible="True"
CornerRadius="8"
ErrorBorderColor="Black"
SeparatorVisible="True"
ErrorSeparatorColor="Black"
ErrorMessage="Must be at least 8 characters"
ErrorColor="Orange"
ErrorFontSize="11"
IsValid="{Binding IsPasswordValid}" />
Properties
Property
Type
Default
Description
Text
string
null
Input text (two-way bindable)
Placeholder
string
null
Placeholder text
IsValid
bool
true
When false, switches to error state
ErrorMessage
string
empty
Text shown below the entry when invalid
Keyboard
Keyboard
Default
Keyboard type (Email, Numeric, Telephone, etc.)
FontSize
double
14
Input font size
TextColor
Color
platform default
Input text color
PlaceholderColor
Color
platform default
Placeholder text color
BorderVisible
bool
false
Show a rectangular border around the control
BorderColor
Color
Transparent
Border color when valid
ErrorBorderColor
Color
Red
Border color when invalid
CornerRadius
double
0
Corner radius of the border
SeparatorVisible
bool
false
Show a 1px line above the error message when invalid
ErrorSeparatorColor
Color
Red
Separator color when invalid
ErrorColor
Color
Red
Error message text color
ErrorFontSize
double
12
Error message font size
Events
Event
Description
TextChanged
Raised when the input text changes
StateButton
A fully customisable tappable button built as a ContentView. Supports press animations, a busy/loading spinner, an optional vertical divider with a trailing icon, gradient backgrounds, and a visual disabled state.
iOS note: reference rasterised images with .png extension (e.g. icon_lock.png), not .svg.
Alternatively use FontImageSource to avoid the bundle lookup entirely:
