Input Component

Email

This is a hint text to help user.

Email

This is a hint text to help user.

Team member*

This is a hint text to help user.

<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." />

Email

This is a hint text to help user.

Email

This is a hint text to help user.

Search

This is a hint text to help user.

<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>

Website

https://

This is a hint text to help user.

Price

USD

This is a hint text to help user.

Website

https://.com

This is a hint text to help user.

<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" />

Email (disabled)

This is a hint text to help user.

Email (disabled)

This is a hint text to help user.

Email (error)

Please enter a valid email address.

<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." />

Description

This is a hint text to help user.

Description (error)

Description must be at least 20 characters.

<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." />

Input Component

Basic

With icons

With text addons

States

Textarea