Input Component
Basic
Default, with value, required
This is a hint text to help user.
This is a hint text to help user.
This is a hint text to help user.
razor
<InputField Label="Email"
Placeholder="olivia@untitledui.com"
Hint="This is a hint text to help user." />
<InputField Label="Email"
Placeholder="olivia@untitledui.com"
Value="olivia@untitledui.com"
Hint="This is a hint text to help user." />
<InputField Label="Team member"
Required="true"
ShowHelp="true"
HelpText="Select a team member"
Placeholder="olivia@untitledui.com"
Hint="This is a hint text to help user." />With icons
Leading and trailing icon slots
This is a hint text to help user.
This is a hint text to help user.
This is a hint text to help user.
razor
<InputField Label="Email" Placeholder="olivia@untitledui.com">
<LeadingIcon>
<svg>...mail icon...</svg>
</LeadingIcon>
</InputField>
<InputField Label="Email" Value="olivia@untitledui.com">
<TrailingIcon>
<svg>...info icon...</svg>
</TrailingIcon>
</InputField>
<InputField Label="Search" Placeholder="Search">
<LeadingIcon>
<svg>...search icon...</svg>
</LeadingIcon>
</InputField>With text addons
Prefix / suffix strings
https://
This is a hint text to help user.USD
This is a hint text to help user.https://.com
This is a hint text to help user.razor
<InputField Label="Website"
LeadingText="https://"
Placeholder="www.untitledui.com" />
<InputField Label="Price"
TrailingText="USD"
Placeholder="0.00"
Type="number" />
<InputField Label="Website"
LeadingText="https://"
TrailingText=".com"
Placeholder="untitledui" />States
Disabled and error
This is a hint text to help user.
This is a hint text to help user.
Please enter a valid email address.
razor
<InputField Label="Email"
Placeholder="olivia@untitledui.com"
Disabled="true" />
<InputField Label="Email"
Value="olivia@untitledui.com"
Disabled="true" />
<InputField Label="Email"
Value="olivia@@"
HasError="true"
ErrorMessage="Please enter a valid email address." />Textarea
Multi-line input
This is a hint text to help user.
Description must be at least 20 characters.
razor
<InputField Label="Description"
IsTextarea="true"
Placeholder="Enter a description..." />
<InputField Label="Description"
IsTextarea="true"
Value="Too short"
HasError="true"
ErrorMessage="Description must be at least 20 characters." />