Form: Styling

Label

Can be provided via the label attribute, but the slot can be used to change the html and CSS of the label. For example add an u-sr-only class to the label to make it (partially) visually hidden. A label is always needed for accessibility reasons.

Prefix

The prefix is used for addons to the input like a minus button in the input-stepper.

Suffix

The suffix can be used for addons to the input like a calculator, datepicker or addressbook. In these cases a button with an icon is used.

Before

Before slot does not have an active use case yet.

After

Examples

Due to our custom inputs being Web Components, it is possible to put HTML content inside an input. For example if you want to add a button as a prefix or suffix.