TextBox Component Demos

Minimal

TextBoxGallery__YDF.Themes.regular

TextBoxGallery__YDF.GeometricVariations.regular

TextBoxGallery__YDF.DecorativeVariations.regular

TextBoxGallery__YDF.GeometricVariations.small

TextBoxGallery__YDF.DecorativeVariations.regular

TextBoxGallery__YDF.GeometricVariations.labelLike

TextBoxGallery__YDF.DecorativeVariations.labelLike

Surrounding

TextBoxGallery__YDF.Themes.regular

TextBoxGallery__YDF.GeometricVariations.regular

TextBoxGallery__YDF.DecorativeVariations.regular

SampleRequired

Please input the name

EmailRequired

Please input the email address.

AgeRequired

Please input you age.

PasswordRequired

Please input the password.

Phone NumberRequired

Please input your phone number.

WebsiteRequired

Please input the valid URL.

TextBoxGallery__YDF.GeometricVariations.small

TextBoxGallery__YDF.DecorativeVariations.regular

SampleRequired

Please input the name

EmailRequired

Please input the email address.

AgeRequired

Please input you age.

PasswordRequired

Please input the password.

Phone NumberRequired

Please input your phone number.

WebsiteRequired

Please input the valid URL.

TextBoxGallery__YDF.GeometricVariations.labelLike

TextBoxGallery__YDF.DecorativeVariations.labelLike

SampleRequired

Please input the name

EmailRequired

Please input the email address.

AgeRequired

Please input you age.

PasswordRequired

Please input the password.

Phone NumberRequired

Please input your phone number.

WebsiteRequired

Please input the valid URL.

External Labels

TextBoxGallery__YDF.Themes.regular

TextBoxGallery__YDF.GeometricVariations.regular

TextBoxGallery__YDF.DecorativeVariations.regular

Label	TextBox
Sample	Required Please input the name
Email	Required Please input the email address.
Age	Required Please input you age.
Password	Required Please input the password.
Phone Number	Required Please input your phone number.
Website	Required Please input the valid URL.

TextBoxGallery__YDF.GeometricVariations.small

TextBoxGallery__YDF.DecorativeVariations.regular

Label	TextBox
Sample	Required Please input the name
Email	Required Please input the email address.
Age	Required Please input you age.
Password	Required Please input the password.
Phone Number	Required Please input your phone number.
Website	Required Please input the valid URL.

TextBoxGallery__YDF.GeometricVariations.labelLike

TextBoxGallery__YDF.DecorativeVariations.labelLike

Label	TextBox
Sample	Required Please input the name
Email	Required Please input the email address.
Age	Required Please input you age.
Password	Required Please input the password.
Phone Number	Required Please input your phone number.
Website	Required Please input the valid URL.

Placeholder

TextBoxGallery__YDF.Themes.regular

TextBoxGallery__YDF.GeometricVariations.regular

TextBoxGallery__YDF.DecorativeVariations.regular

TextBoxGallery__YDF.GeometricVariations.small

TextBoxGallery__YDF.DecorativeVariations.regular

TextBoxGallery__YDF.GeometricVariations.labelLike

TextBoxGallery__YDF.DecorativeVariations.labelLike

Multiline

TextBoxGallery__YDF.Themes.regular

TextBoxGallery__YDF.GeometricVariations.regular

TextBoxGallery__YDF.DecorativeVariations.regular

DescriptionRequired

Please input the description

TextBoxGallery__YDF.GeometricVariations.small

TextBoxGallery__YDF.DecorativeVariations.regular

DescriptionRequired

Please input the description

TextBoxGallery__YDF.GeometricVariations.labelLike

TextBoxGallery__YDF.DecorativeVariations.labelLike

DescriptionRequired

Please input the description

Prepended Icon

TextBoxGallery__YDF.Themes.regular

TextBoxGallery__YDF.GeometricVariations.regular

TextBoxGallery__YDF.DecorativeVariations.regular

User Name

TextBoxGallery__YDF.GeometricVariations.small

TextBoxGallery__YDF.DecorativeVariations.regular

User Name

TextBoxGallery__YDF.GeometricVariations.labelLike

TextBoxGallery__YDF.DecorativeVariations.labelLike

User Name

Appended Icon

TextBoxGallery__YDF.Themes.regular

TextBoxGallery__YDF.GeometricVariations.regular

TextBoxGallery__YDF.DecorativeVariations.regular

User Name

TextBoxGallery__YDF.GeometricVariations.small

TextBoxGallery__YDF.DecorativeVariations.regular

User Name

TextBoxGallery__YDF.GeometricVariations.labelLike

TextBoxGallery__YDF.DecorativeVariations.labelLike

User Name

Password Displaying Toggle

TextBoxGallery__YDF.Themes.regular

TextBoxGallery__YDF.GeometricVariations.regular

TextBoxGallery__YDF.DecorativeVariations.regular

Password

TextBoxGallery__YDF.GeometricVariations.small

TextBoxGallery__YDF.DecorativeVariations.regular

Password

TextBoxGallery__YDF.GeometricVariations.labelLike

TextBoxGallery__YDF.DecorativeVariations.labelLike

Password

Invalid State Highlighting

TextBoxGallery__YDF.Themes.regular

TextBoxGallery__YDF.GeometricVariations.regular

TextBoxGallery__YDF.DecorativeVariations.regular

User Name

• The user name must have at least 3 characters. Please input more characters.
• Inputted user name is including the following forbidden characters: "$", "'". Please input the other user name without next characters: "$", "&", "'", """.

• Checking of the inputted user name for the availability ...

• The user name is available

• The malfunction has occurred during the checking of the user name for the availability. If the internet connection has been lost, would you please to input the user name once again when the internet connection will recover?If the internet connection is fine, we are sorry, but it is the system failure. Could you please to notify the customers support?

Password

• Inputted password has not enough characters. Please input at least 16 characters

TextBoxGallery__YDF.GeometricVariations.small

TextBoxGallery__YDF.DecorativeVariations.regular

User Name

• The user name must have at least 3 characters. Please input more characters.
• Inputted user name is including the following forbidden characters: "$", "'". Please input the other user name without next characters: "$", "&", "'", """.

• Checking of the inputted user name for the availability ...

• The user name is available

• The malfunction has occurred during the checking of the user name for the availability. If the internet connection has been lost, would you please to input the user name once again when the internet connection will recover?If the internet connection is fine, we are sorry, but it is the system failure. Could you please to notify the customers support?

Password

• Inputted password has not enough characters. Please input at least 16 characters

TextBoxGallery__YDF.GeometricVariations.labelLike

TextBoxGallery__YDF.DecorativeVariations.labelLike

User Name

• The user name must have at least 3 characters. Please input more characters.
• Inputted user name is including the following forbidden characters: "$", "'". Please input the other user name without next characters: "$", "&", "'", """.

• Checking of the inputted user name for the availability ...

• The user name is available

• The malfunction has occurred during the checking of the user name for the availability. If the internet connection has been lost, would you please to input the user name once again when the internet connection will recover?If the internet connection is fine, we are sorry, but it is the system failure. Could you please to notify the customers support?

Password

• Inputted password has not enough characters. Please input at least 16 characters

Valid State Highlighting

TextBoxGallery__YDF.Themes.regular

TextBoxGallery__YDF.GeometricVariations.regular

TextBoxGallery__YDF.DecorativeVariations.regular

User Name

Password

TextBoxGallery__YDF.GeometricVariations.small

TextBoxGallery__YDF.DecorativeVariations.regular

User Name

Password

TextBoxGallery__YDF.GeometricVariations.labelLike

TextBoxGallery__YDF.DecorativeVariations.labelLike

User Name

Password

Readonly And Disabled

Has Inputted Value

TextBoxGallery__YDF.Themes.regular

TextBoxGallery__YDF.GeometricVariations.regular

TextBoxGallery__YDF.DecorativeVariations.regular

TextBoxGallery__YDF.GeometricVariations.small

TextBoxGallery__YDF.DecorativeVariations.regular

TextBoxGallery__YDF.GeometricVariations.labelLike

TextBoxGallery__YDF.DecorativeVariations.labelLike

Placeholder Only

TextBoxGallery__YDF.Themes.regular

TextBoxGallery__YDF.GeometricVariations.regular

TextBoxGallery__YDF.DecorativeVariations.regular

TextBoxGallery__YDF.GeometricVariations.small

TextBoxGallery__YDF.DecorativeVariations.regular

TextBoxGallery__YDF.GeometricVariations.labelLike

TextBoxGallery__YDF.DecorativeVariations.labelLike

Value Copying Button

TextBoxGallery__YDF.Themes.regular

TextBoxGallery__YDF.GeometricVariations.regular

TextBoxGallery__YDF.DecorativeVariations.regular

User Name

TextBoxGallery__YDF.GeometricVariations.small

TextBoxGallery__YDF.DecorativeVariations.regular

User Name

TextBoxGallery__YDF.GeometricVariations.labelLike

TextBoxGallery__YDF.DecorativeVariations.labelLike

User Name

Geometric Modifiers

No Roundings

TextBoxGallery__YDF.Themes.regular

TextBoxGallery__YDF.GeometricVariations.regular

TextBoxGallery__YDF.DecorativeVariations.regular

TextBoxGallery__YDF.GeometricVariations.small

TextBoxGallery__YDF.DecorativeVariations.regular

TextBoxGallery__YDF.GeometricVariations.labelLike

TextBoxGallery__YDF.DecorativeVariations.labelLike

Loading Placeholder