YouTip

The list class can also be used for input elements. The item-input and item classes specify the text box and its label. ### Input Attribute: placeholder In the following example, the default width is 100% (no borders on the left and right sides), and the placeholder attribute is used to set the hint message for the expected value of the input field. [Try it »](#) ### Input Attribute: input-label Use input-label to place the label on the left side of the input box. [Try it »](#) * * * ## Stacked Labels Stacked labels are typically located at the top of the input box. Each option uses the item-stacked-label class. Each input box requires an input-label. The following example also uses the placeholder attribute to set the input hint. [Try it »](#) * * * ## Floating Labels Floating labels are similar to stacked labels but have an animation effect. Each option requires the item-floating-label class, and the input label needs the input-label class. [Try it »](#) * * * ## Inset Forms By default, each input field has a width of 100%, but we can use the list list-inset or card class to set the padding for the form. The card class includes a shadow. [Try it »](#) * * * ## Inset Input Fields Use list-inset to set an inset entity list. The item-input-inset style can be used to inset a button. [Try it »](#) * * * ## Input with Icons Icons can be easily added to item-input input boxes. The icon can be placed before the . [Try it »](#) * * * ## Header Input Input boxes can be placed in the header, and submit or cancel buttons can be added. [Try it »](#)