Overview
DaisyInput is a text input control with DaisyUI styling, supporting labels (top or floating), helper text, icons, and multiple visual variants.
Properties
Text
The text content of the input.
PlaceholderText
Placeholder text displayed when the input is empty.Alias: Watermark (for compatibility)
Variant
Variant
DaisyInputVariant
default:"Bordered"
The visual variant of the input.Available variants:
Bordered - Standard bordered inputGhost - Minimal styling, no visible borderPrimary - Primary color focusSecondary - Secondary color focusAccent - Accent color focusInfo - Info color focusSuccess - Success color focusWarning - Warning color focusError - Error color focusFilled - Filled background style
Size
Size
DaisySize
default:"Medium"
The size of the input. Controls height, font size, and padding.Available sizes:
ExtraSmallSmallMediumLargeExtraLarge
Label Properties
Label text displayed above or inside (floating) the input.
LabelPosition
DaisyLabelPosition
default:"Top"
Position of the label.Options:
Top - Label above inputFloating - Animated label that floats up on focus/input
Shows a red asterisk (*) next to the label.
Shows “Optional” text next to the label.
Helper Text
Hint text displayed below the label and above the input.
Helper text displayed below the input (typically for character count or validation messages).
Icon Properties
Icon displayed at the start (left) of the input. Accepts Geometry or string path data.
Path data string for the start icon. Takes precedence over StartIcon.
Icon displayed at the end (right) of the input. Accepts Geometry or string path data.
Path data string for the end icon. Takes precedence over EndIcon.
TextBox Properties
Maximum number of characters allowed. 0 means unlimited.
Whether the input accepts the Return key for multiline input.
TextWrapping
TextWrapping
default:"NoWrap"
Text wrapping mode.
When true, the text cannot be edited but can still be selected and copied.
Focus and Selection
Gets or sets the starting position of text selection.
Gets or sets the length of text selection.
Customization
Custom brush for the focus border color. Overrides variant-based focus color.
Events
TextChanged
TextChanged
TypedEventHandler<DaisyInput, TextChangedEventArgs>
Occurs when the text content changes.
TextChanging
TextChanging
TypedEventHandler<DaisyInput, TextBoxTextChangingEventArgs>
Occurs when the text is about to change. Allows for text validation/filtering.
Methods
FocusInnerTextBox()
Focuses the inner TextBox and optionally selects all text.
public void FocusInnerTextBox(FocusState focusState = FocusState.Programmatic, bool selectAll = false)
FocusInput(bool selectAll = false)
Usage Examples
<!-- Simple bordered input -->
<controls:DaisyInput PlaceholderText="Enter text..." />
<!-- With label -->
<controls:DaisyInput
Label="Username"
PlaceholderText="Enter username" />
<!-- Required field -->
<controls:DaisyInput
Label="Email"
IsRequired="True"
PlaceholderText="[email protected]" />
XAML - Variants
<!-- Primary variant (blue focus) -->
<controls:DaisyInput
Variant="Primary"
Label="Primary"
PlaceholderText="Primary input" />
<!-- Ghost variant (no border) -->
<controls:DaisyInput
Variant="Ghost"
PlaceholderText="Ghost input" />
<!-- Filled variant -->
<controls:DaisyInput
Variant="Filled"
Label="Filled Input"
PlaceholderText="Type here..." />
XAML - Sizes
<controls:DaisyInput Size="ExtraSmall" PlaceholderText="Extra Small" />
<controls:DaisyInput Size="Small" PlaceholderText="Small" />
<controls:DaisyInput Size="Medium" PlaceholderText="Medium" />
<controls:DaisyInput Size="Large" PlaceholderText="Large" />
<controls:DaisyInput Size="ExtraLarge" PlaceholderText="Extra Large" />
XAML - Floating Label
<controls:DaisyInput
Label="Full Name"
LabelPosition="Floating"
PlaceholderText="John Doe" />
XAML - With Icons
<!-- Start icon (search) -->
<controls:DaisyInput
StartIconData="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
PlaceholderText="Search..." />
<!-- End icon (email) -->
<controls:DaisyInput
Label="Email"
EndIconData="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"
PlaceholderText="[email protected]" />
XAML - Helper Text
<controls:DaisyInput
Label="Password"
HintText="Must be at least 8 characters"
HelperText="0/50 characters"
PlaceholderText="Enter password" />
<controls:DaisyInput
Label="Description"
AcceptsReturn="True"
TextWrapping="Wrap"
Height="120"
PlaceholderText="Enter description..." />
XAML - Semantic Colors
<!-- Success (green focus) -->
<controls:DaisyInput Variant="Success" PlaceholderText="Valid input" />
<!-- Warning (yellow focus) -->
<controls:DaisyInput Variant="Warning" PlaceholderText="Check this" />
<!-- Error (red focus) -->
<controls:DaisyInput Variant="Error" PlaceholderText="Invalid input" />
C# - Dynamic Configuration
var input = new DaisyInput
{
Label = "Search",
PlaceholderText = "Type to search...",
Variant = DaisyInputVariant.Primary,
Size = DaisySize.Large,
StartIconData = "M15.5 14h-.79l-.28-.27..."
};
input.TextChanged += (s, e) =>
{
var searchText = input.Text;
// Perform search
};
C# - Focus and Selection
// Focus input and select all text
input.FocusInnerTextBox(selectAll: true);
// Select specific range
input.SelectionStart = 0;
input.SelectionLength = 5;
C# - Text Validation
input.TextChanging += (s, args) =>
{
// Filter non-numeric characters
if (!string.IsNullOrEmpty(input.Text) && !int.TryParse(input.Text, out _))
{
args.Cancel = true;
}
};
Notes
- Floating Label Animation: The floating label smoothly animates up when the input gains focus or contains text
- Icon Sizing: Icons automatically scale based on the input’s
Size property
- Focus Ring: Focus border color is determined by
Variant or can be customized with BorderRingBrush
- Platform Differences: Floating label behavior is optimized for both Windows and Skia/WASM platforms
- Clear Button: The built-in clear button (X) automatically inherits theme colors
